How to make 3-corner-rounded triangle in CSS

by

My best attempt: http://dabblet.com/gist/4592062
final

Pixel perfection at any size, uses simpler math than Ana’s original solution, and is more intuitive in my opinion 🙂

.triangle {
	position: relative;
	background-color: orange;
	text-align: left;
}
.triangle:before,
.triangle:after {
	content: '';
	position: absolute;
	background-color: inherit;
}
.triangle,
.triangle:before,
.triangle:after {
	width:  10em;
	height: 10em;
	border-top-right-radius: 30%;
}

.triangle {
	transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.triangle:before {
	transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.triangle:after {
	transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
<div class="triangle"></div>

More Related Contents:

  1. How do CSS triangles work?
  2. Line before and after title over image [duplicate]
  3. Transparent arrow/triangle indented over an image
  4. Transparent text cut out of background
  5. Border-radius in percentage (%) and pixels (px) or em
  6. CSS triangle custom border color
  7. Wavy shape with css
  8. CSS Only Pie Chart – How to add spacing/padding between slices?
  9. How to add border in my clip-path: polygon(); CSS style
  10. Inset border-radius with CSS3
  11. CSS transparent curved shape with two rounded sides
  12. How to draw a circle with text in the middle?
  13. css skew element and get inner rounded border top
  14. Triangle shape with background image
  15. draw diagonal lines in div background with CSS
  16. Outlining and partially filling an SVG Shape
  17. Hexagon shape with CSS3
  18. Is a concave border radius possible?
  19. Align text on slanted line
  20. Slanted Corner on CSS box
  21. CSS Transform Skew [duplicate]
  22. Circle with two borders
  23. Border within border CSS
  24. Half hexagon shape with one element
  25. Clip path inset circle?
  26. Transparent hollow or cut out shape in HTML
  27. Make CSS3 triangle with linear gradient
  28. Div with cut out edges, border and transparent background
  29. how to handle ‘double opacity’ of two overlapping divs
  30. Double curved shape

Leave a Comment