How to Create a Triangular Shape with Curved Border

How to create a triangular shape with curved border?

You can do it with some perspective and rotation:

.box {

  margin:20px;

  padding:20px calc(50% - 100px); /* this will fix the max width to 2x100px */

  /* the horizontal lines (one on each side)*/

  background:

    linear-gradient(red,red) left,

    linear-gradient(red,red) right;

  background-size:calc(50% - 100px) 2px;

  background-repeat:no-repeat;

  /* */

  text-align:center;

  position:relative;

}

.box::before,

.box::after{

  content:"";

  position:absolute;

  top:-10px; /* lower than 0 to avoid the overlap due to rotation */

  /* same as the padding */

  left:calc(50% - 100px); 

  right:calc(50% - 100px);

  /* */

  bottom:50%;

  border:3px solid red;

  border-bottom:none;

  border-radius:15px 15px 0 0;

  /* adjust here to control the shape  */

  transform:var(--s,scaley(1)) perspective(40px) rotateX(25deg);

  /* */

  transform-origin:bottom;

}

.box::after {

  --s:scaley(-1);

}

<div class="box"> some text here</div>

<div class="box"> more and more <br> text here</div>

<div class="box"> even more <br> and more <br> text here</div>

How to create a triangle in CSS3 using border-radius

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>

How to make 3-corner-rounded triangle in CSS

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

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>

Triangle with one rounded corner

I know this is a little hacky, but I don't think there is an easy way to do this with a single class.

All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.

.arrow-left {

  position: absolute;

  width: 100px;

  height: 100px;

  left: 20px;

  background: black;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

  border-radius: 10px;

}

.cover {

  position: absolute;

  height: 100px;

  width: 40px;

  overflow: hidden;

}

<div class="cover">

  <div class="arrow-left"></div>

</div>

css rounded corner of right angled triangle

Here is an idea where you can rely on 2 pseudo element and some background coloration to approximate it. You simply need to find the correct value to have the perfect overlap between both pseudo elements.

h1 {

  padding-left:1em;

  position:relative;

}

h1:before {

  content: "";

  position:absolute;

  left: 0;

  top: calc(50% - 0.35em);

  width: 0.7em;

  height: 0.7em;

  background: linear-gradient(to bottom left, #34495e 50%, transparent 50%);

  border-radius: 0.1em;

}

h1:after {

  content: "";

    position: absolute;

    left: 3.8px;

    top: -0.1px;

    width: 0.92em;

    height: 0.8em;

    margin-right: 10px;

    background: linear-gradient(to top,#34495e 3.5px,transparent 5px);

    border-radius: 0.1em;

    transform: rotate(45deg);

    z-index: -1;

}

<h1>Heading</h1>

Is it possible to make a rounded triangle with just CSS?

To actually answer your question (and provide the first answer without border-radius): If you want a CSS only solution, you will have to use border-radius.

Nevertheless I would highly recommend to use SVG for creating shapes, as simple shapes like this are easy to create manually, it's responsive, it's widely supported now and (as @chharvey mentioned in the comments) semantically more appropriate.

<svg viewbox="0 0 50 50" height="56px">

  <path d="M1 50 V10 Q1 1 10 1 H50z" fill="#ff4369" />

</svg>

---

Related Topics