How to create a triangle in CSS3 using border-radius

by

Demo

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

This should produce:

enter image description here

The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.

http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)

Alternatives

SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.

See also: Raphaël, a library for working with vector graphics on the web

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. Element will not stay centered, especially when re-sizing screen
  3. Responsive grid of hexagons
  4. CSS Progress Circle
  5. How to use CSS to surround a number with a circle?
  6. Elongated hexagon shaped button using only one element
  7. html/css hexagon with image inside
  8. Easier way to create circle div than using an image?
  9. HTML5 / CSS3 Circle with Partial Border
  10. Create a slanted edge to a div [duplicate]
  11. Draw Circle using css alone [duplicate]
  12. Creating a ‘New’ spiky label with 24 or above point burst
  13. Half circle with CSS (border, outline only)
  14. How to add border to a container with transparent gaps in between
  15. Slanted diagonal line in html or css?
  16. How can I make a 45 degree responsive ribbon with folded corner?
  17. Border with a transparent centred arrow
  18. Add outward curving border to elements like this: ◝◟___◞◜
  19. How to create a curved speech bubble?
  20. How can I make a div with irregular shapes with css3 and html5?
  21. How can I create a wavy shape CSS?
  22. How to Make A Chevron Arrow Using CSS?
  23. div with triangle at the bottom with background image
  24. Responsive CSS Circles
  25. CSS Zigzag Border with a Textured Background
  26. How do I create a teardrop in HTML?
  27. Square DIV where height is equal to viewport
  28. How to create a heart shape using CSS?
  29. Make plus symbol in CSS
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment