HTML and CSS

How to make 3 corner rounded triangle in CSS

Very simple way of making a 3 corner rounded triangle using only HTML and CSS3. So in this tutorial we will show how to create 3 corner rounded triangle using CSS3.

rounded triangle in CSS
Rounded triangle shape CSS

HTML

<div class="triangle"></div>

CSS

.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%);
}
mandatory shape in css html
Mandatory shape in HTML/CSS

HTML

<div class="warning">Mandatory</div>

CSS

.warning {
    position: relative;
    display: inline-block;
    font-weight: bold;
    color: #FF5500;
}
.warning:before {
    position: absolute;
    top: 50%;
    right: 12px;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    transform: translateY(-36%);
    text-shadow: 0 0 7px #111111;
    z-index: 1;
    content: '!';
}
.warning:after {
    display: inline-block;
    margin-left: 3px;
    font-size: 5px;
    border: solid 3em transparent;
    border-top-width: 0;
    border-bottom-width: 5em;
    border-bottom-color: #FF5500;
    clip-path: circle(54% at 50% 69%);
    vertical-align: bottom;
    content: '';
}
3 corner rounded triangle in CSS
Mandatory shape in HTML/CSS

HTML

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

CSS

.diff-arrow {
  margin-left:30px;
  position: relative;
  background-color: #20C0F1;
  text-align: left;
  width: 10em;
  height: 10em;
  border-top-right-radius: 20%;
}

.diff-arrow:before,
.diff-arrow:after {
  content: '';
  position: absolute;
  background-color: inherit;
  width: 10em;
  height: 10em;
  border-top-right-radius: 15%;
}

.diff-arrow {
  transform: rotate(-45deg) skewX(0deg) scale(0.5);
}

.diff-arrow:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.diff-arrow:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

CSS Shapes with rounded corners

This is a great example of CSS Shapes with rounded corners using HTML/CSS.

  1. Include the HTML line.
  2. Write a CSS for Triangle shapes

In this quick tutorial, we’ll take a look at a practical example where the a triangle with (or without) rounded corners. We’re going to design a CSS triangle.


Learn HTML/CSS from W3 School Website