How to add bordered triangle over a div tag

by

Using the initial box with pointer and shadows at http://cssarrowplease.com/ you can restyle them to make the shape you want:

.arrow_box {
  top: 40px;
  position: relative;
  background: #ffffff;
  border: 1px solid #719ECE;  /*set border colour here*/
  width: 200px;
  height: 200px;
  border-radius: 3px;
  -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); /*set shadow colour  and size here*/
  -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8);
  filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8));
}

.arrow_box:after,
.arrow_box:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 19px;
  left: 50%;
  margin-left: -19px;
}

.arrow_box:before {
  border-color: rgba(113, 158, 206, 0);
  border-bottom-color: #719ECE;
  border-width: 20px;
  left: 50%;
  margin-left: -20px;
}
<div class="arrow_box">
</div>

if you need to move the arrow further right, then just play with the left for .arrow_box:after and .arrow_box:before

More Related Contents:

  1. Animate text for landing page
  2. CSS – Equal Height Columns?
  3. How do you easily horizontally center a using CSS? [duplicate]
  4. CSS Floating Divs At Variable Heights [duplicate]
  5. Margin-Top not working for span element?
  6. Footer at bottom of page or content, whichever is lower
  7. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  8. Is float for layout bad? What should be used in its place?
  9. Center a div in CSS [closed]
  10. How to create equal height columns in pure CSS [duplicate]
  11. How do I right align div elements?
  12. What is the difference between the hidden attribute (HTML5) and the display:none rule (CSS)?
  13. How does object-fit work with canvas element?
  14. How to make a element expand or contract to its parent container?
  15. scale HTML5 Video and break aspect ratio to fill whole site
  16. Disable zoom on a div, but allow zoom on the page (an alternate div)
  17. How would you make two s overlap?
  18. element not working in Internet Explorer 11
  19. Split Div Into 2 Columns Using CSS
  20. Why can’t I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height
  21. How to get these two divs side-by-side?
  22. Why use an HTML5 semantic tag instead of div? [duplicate]
  23. How to display and hide a div with CSS?
  24. How to make responsive table [closed]
  25. How to add a search box with icon to the navbar in Bootstrap 3?
  26. Align vertically using CSS 3
  27. HTML5 image icon to input placeholder
  28. background-image doesn’t appear if is empty?
  29. CSS Floating Divs with different height are aligned with space between them
  30. Horizontal scroll in DIV with many small DIV’s inside (no text)

Leave a Comment