Html/Css Triangle with pseudo elements

by

The issue is with the use of border. you can check this link How do CSS triangles work? and you will understand how border works and why you get this output.

An alternative solution is to use rotation and border like this :

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position:relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}
<div class="box">

</div>

And in case you want your box with the arrow to be transparent, here is another trick to achieve it (as the above solution consider solid color as background):

body {
 margin:0;
 background-image:linear-gradient(to right,yellow,pink);
}

.box {
  border: 1px solid;
  border-top:transparent; /*make border-top transparent*/
  margin: 50px;
  height: 50px;
  position:relative;
  /* Use gradient to mimic the border top with a transparent gap */
  background:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px) top/100% 1px no-repeat;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid ;
  border-left: 1px solid;
  top: -11px;
  left: 14px;
  transform: rotate(45deg);
}
<div class="box">

</div>

Here is another version with dashed border:

body {
 margin:0;
 background-image:linear-gradient(to right,yellow,pink);
}

.box {
  border: 1px dashed;
  border-top:transparent; /*make border-top transparent*/
  margin: 50px;
  height: 50px;
  position:relative;
  background:
   repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top left/10px 1px,
   repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top right/calc(100% - 40px) 1px;
  background-repeat:no-repeat;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px dashed;
  border-left: 1px dashed;
  top: -11px;
  left: 13px;
  transform: rotate(45deg);
}
<div class="box">

</div>

More Related Contents:

  1. Can I use a :before or :after pseudo-element on an input field?
  2. ‘transform3d’ not working with position: fixed children
  3. Font Awesome 5 on pseudo elements shows square instead of icon
  4. How to keep origin in center of image in scale animation?
  5. :after and :before CSS pseudo elements hack for Internet Explorer 7
  6. CSS content property: is it possible to insert HTML instead of Text?
  7. Elongated hexagon shaped button using only one element
  8. Using CSS :before and :after pseudo-elements with inline CSS?
  9. Setting transform-origin on SVG group not working in Firefox
  10. Unskewing the ends of an assortment multiple skewed images
  11. Why does my Transform snap back?
  12. Why does a filter gradient on a pseudo element not work in IE8?
  13. How can I use the CSS pseudo-element :before{ content: ” } to affect an element?
  14. Can a ::before selector be used with a ?
  15. CSS data attribute new line character & pseudo-element content value
  16. How to rotate and postion an element on the top left or top right corner?
  17. Which elements support the ::before and ::after pseudo-elements?
  18. 5 images symmetrically seperated with diagonal lines
  19. Position fixed doesn’t work when using -webkit-transform
  20. How to transform each side of a shape separately?
  21. Using attr(data-icon) property to display unicode before element
  22. after pseudo element not appearing in code
  23. pseudo-element acting like a grid item in CSS grid
  24. Adding text before list
  25. Applying an ellipsis to multiline text [duplicate]
  26. CSS – How to Style a Selected Radio Buttons Label?
  27. CSS Progress Circle
  28. How to center image horizontally within a div element?
  29. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  30. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?

Leave a Comment