CSS method of implementing rounded triangles

This article mainly and you introduced the CSS implementation with the Fillet Triangle sample code of the relevant data, small series feel very good, now share to everyone, also to make a reference. Follow the small series together to see it, hope to help everyone.

Objective

The goal is achieved as follows:

Realize

<i class= "triangle triangle-up" ></i><i class= "triangle triangle-right" ></i><i class= " Triangle Triangle-down "></i><i class=" triangle Triangle-left "></i>

. triangle{Display:inline-block;  font-size:0; Overflow:hidden;}.  triangle:before{content: "";  position:relative;  Display:inline-block; border:25px solid Transparent;}.  triangle-up{position:relative;  top:2px;  border-top-left-radius:50%; border-top-right-radius:50%;}.  triangle-up:before{bottom:2px;  border-top-width:0;  border-bottom-width:50px; Border-bottom-color:rgb (181, 181, 181);}.  triangle-right{position:relative;  right:2px;  border-top-right-radius:50%; border-bottom-right-radius:50%;}.  triangle-right:before{left:2px;  border-right-width:0;  border-left-width:50px; Border-left-color:rgb (181, 181, 181);}.  triangle-down{position:relative;  bottom:2px;  border-bottom-right-radius:50%; border-bottom-left-radius:50%;}.  triangle-down:before{top:2px;  border-bottom-width:0;  border-top-width:50px; Border-top-color:rgb (181, 181, 181);}.  triangle-left{position:relative;  left:2px;  border-top-left-radius:50%; Border-bottom-left-radius:50%;}.  triangle-left:before{right:2px;  border-left-width:0;  border-right-width:50px; Border-right-color:rgba (181, 181, 181, 1);}

Analysis

Extract a triangle from the above code to analyze, take Triangle-down to say.

The general CSS is not to draw a slash, so you have to go the other ways. View the above implementation code, you will find a lot of use to border, in fact, this is the core, is not complex, a picture can explain

Adjusting the size or shape of a triangle can be achieved by adjusting the size of the border-width in different directions, such as resizing the Triangle-down:

1. Adjustment height: border-top-width:100px;;

2. Adjustment width: border-right-width:50px;border-left-width:50px;

The triangle of the other directions are so tuned to size.

Look at the "preface" in the Triangle-down you will find that the downward corner is not sharp, but a little bit of "small radian."

This "small radian" implementation is not difficult, in fact, is not a radian, but the use of Overflow:hidden to "cut" a little bit, magnification can be found that the transition is not harmonious, but because this kind of triangle is actually used when the size will be very small, so the naked eye on this disharmony and no perception, will be mistaken for a small round angle, The above example is cut to 2px.

Another way to achieve a more harmonious transition is to draw a large enough circular overflow:hidden area, and then put the triangle in, three corners will be cut more harmonious, but at this time the triangle is quite large, you can use Transform:scale () to reduce it. It's a hassle, isn't it? I'll just forget it.

Application

<p class= "Bubble-box" >  <p class= "Bubble-box-hat" >    <i class= "Triangle triangle-up" ></i >  </p>   <p class= "Bubble-box-body" >i am isaac!</p></p>

. bubble-box{  font-size:0;  margin-top:50px;}. bubble-box-hat{  Text-align:center;}. bubble-box-body{  color: #FFFFFF;  Background:rgb (181, 181, 181);  font-size:28px;  border-radius:10px;  padding:100px;  Text-align:center;}