【CSS】CSS画矩形、圆、半圆、弧形、半圆、⼩三⾓、疑问框
在⽹页中，常常会⽤到各种Icon，假设⽼是⿇烦设计狮画出来不免有些不好意思，所以有时候我们也能够⽤CSS写出各种简单的形状。⼀来能够减轻他们的负担，⼆来也能够使⽤CSS替代图⽚。提⾼载⼊速度。
在⽹页中。结合CSS能画出来的最主要的形状就是矩形，所以，我们能够在矩形的基础上做出各种变换，得到⾮常多不同的形状。
这次的分享主要⽤到圆⾓、边框、定位等知识点（鉴于IE9以上才⽀持圆⾓，临时不考虑兼容问题）
先做⼀些通⽤的基础设置：
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 100px;
background-color: red;
}
毫⽆疑问。结合HTML就能够画出最主要的矩形：
<div>矩形</div>
效果：
以下针对矩形做⼀些变换：
圆形：
<div class="circle">圆形</div>
border-radius圆⾓的四个值按顺序取值分别为：左上、右上、右下、左下。
原理：四个⾓都是圆⾓：四个⾓的取值为50%或为宽和⾼⼀样的值（此处即100px）。
.circle {
border-radius: 50%;
}
半圆：
<div class="semi-circle">半圆</div>
原理：左上、右上⾓是圆⾓，右下、左下⾓是直⾓：左上⾓、右上⾓的值为宽和⾼⼀样的值。右下⾓、左下⾓的值不变（等于0）。另外。由于还要设置⾼度值为原来⾼度的⼀半才是标准的半圆。
.semi-circle {
border-radius: 100px 100px 0 0;
height: 50px;
}
扇形：
<div class="sector">扇形</div>
原理：左上⾓是圆⾓。其余三个⾓都是直⾓：左上⾓的值为宽和⾼⼀样的值，其它三个⾓的值不变（等于0）。
border radius什么意思.sector {
border-radius: 100px 0 0;
}
弧形：
<div class="arc">弧形</div>
原理：两个对⾓变，另外两个对⾓不变：⽐⽅，左上⾓、右下⾓取值为宽和⾼⼀样的值。右上⾓、左下⾓的值不变（等于0） .加⼊transform
属性可旋转成平躺的弧形，类似⼈的嘴巴形状，(*^__^*) 嘻嘻……
.arc{
border-radius: 100px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
⼩三⾓：
<div class="triangle"></div>
<div class="arrow"></div>
原理：设置边框，并把原来div的宽和⾼的值设置为0，即把原来的矩形压缩成仅仅有边框，但由于设
置的边框值⽐較⼤（为了保证三⾓形看起来不会太⼩或者太细），然后设置每个边框的颜⾊不同。就能够看出三⾓形事实上就能够是由边框变换⽽来的。若仅仅想显⽰某⼀块三⾓形，能够把其它的边框颜⾊设置为透明，即transparent。
.triangle{
border: 50px solid green;
width: 0;
height: 0;
border-top-color: yellow;
border-right-color: blue;
border-bottom-color: pink;
border-left-color: orange;
}
.arrow{
background: none; /*为了清除前⾯div设置的背景颜⾊*/
border: 50px solid red;
width: 0;
height: 0;
border-color: red transparent transparent transparent;
}
疑问框：
<div class="rectangle">疑问框</div>
原理：由圆⾓矩形和⼀个⼩三⾓组成：可结合伪元素、定位实现。
/*圆⾓矩形*/
.
rectangle{
width: 200px;
border-radius: 15px;
position: relative;
}
/*⼩三⾓*/
.rectangle::before{
content: "";
width: 0;
height: 0;
border: 15px solid red;
border-color: red transparent transparent transparent;
position:absolute;
bottom: -30px;
left: 40px;
}
Author：致知
Sign：路漫漫其修远兮。吾将上下⽽求索。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。