Home
•
Contact
•
Privacy Policy
•
ToS
🔍
Transparent Arrow with CSS borders over an image
Learn how to create Transparent Arrow with CSS borders over an image using html, css and/or js.
<main> <div class="arrow_bot"></div> </main> <!-- source de l'image : http://www.webdesignerdepot.com/2013/12/can-we-kill-off-lorem-ipsum/ --> <style> main{ margin: 0 auto; max-width:800px; } .arrow_bot{ background: url("http://netdna.webdesignerdepot.com/uploads/2013/12/featured5.jpg") #FF795C no-repeat ; background-size:cover; width: 100%; height: 500px; position: relative; } .arrow_bot::before { position: absolute; content:""; border-style: solid; border-width: 0 50px 50px; border-color: #ffffff transparent #ffffff #ffffff; left:0; right: 50%; bottom: 0; } .arrow_bot::after { left: 50%; position: absolute; content:""; width: 50%; border-style: solid; border-width: 0 0 50px 50px; border-color: transparent transparent #ffffff transparent; bottom: 0; } </style>
Random HTML Example Codes:
border-image demo
Animated Headlines - CSS & JS
Modal with Ajax Content
Star rating for emailStar rating for email
Accessible Custom Checkboxes with CSS only
Suggestion Search Box with Pure CSS
Using an Anchor as a Button
HTML Table Borders
Bootstrap Table Search
Define an HTML Table
Hover Effect Ideas-2
Relative File Paths
Rotating Words using CSS Animations
Scrubbing.js
Fabric.js Playground
HTML <nav> Element
Dotted Table Borders
Awesome11 - CSS Columns
Responsive Highcharts bar chart
Yu Gothic and Yu Mincho CSS Font-family test
CSS Box Shadow Examples
HTML <article> Element
jquery multiple image upload and preview
Whale | SVG & JS
HTML Links - The target Attribute
HTML JavaScript
ScrollMagic Sticky Sections
HTML5 Logo in Canvas
Responsive Material Design Timeline
Isotope - filtering, with toggle buttons
