CSS 绘图【汇总】

长方形（矩形）

div 天然就是一个矩形

<div class="box rectangle"></div>

.box {
  height: 100px;
  width: 200px;
}
.rectangle {
  border: 1px solid red;
}

<div class="box rectangleBg"></div>

.box {
  height: 100px;
  width: 200px;
}
.rectangleBg {
  background-color: red;
}

正方形

将长方形设置为​​长=宽​​即可

<div class="box square"></div>

.box {
  height: 100px;
  width: 100px;
}
.square {
  border: 1px solid red;
}

圆角矩形

添加圆角样式即可

border-radius: 20px;

<div class="box roundedRectangle"></div>

.box {
   height: 100px;
   width: 200px;
 }

 .roundedRectangle {
   border-radius: 20px;
   background-color: red;
 }

圆形

宽高相同的情况下，添加 50% 的圆角

border-radius: 50%;

<div class="box circle"></div>

.box {
  height: 100px;
  width: 100px;
}

.circle {
  border-radius: 50%;
  background-color: red;
}

三角形

使用border属性绘图

正三角形

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

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

斜三角形

如对话框左侧的斜三角

<div class="trapezoid"></div>

.trapezoid {
  width: 0px;
  border-width: 10px 4px;
  border-style: solid;
  border-color: #f30 #f30 transparent transparent;
}

梯形

<div class="trapezoid"></div>

.trapezoid {
  width: 80px;
  height: 80px;
  border: 80px solid;
  border-color: #f30 transparent transparent;
}

对话框

<div class="dialog"></div>

.dialog {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
}

.dialog:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 38px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 20px solid red;
  border-bottom: 10px solid transparent;
}

太极图

<div class="yin-yang"></div>

.yin-yang {
  width: 96px;
  height: 48px;
  background: #eee;
  border-color: red;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  border-radius: 100%;
  position: relative;
}

.yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #eee;
  border: 18px solid red;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}

.yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: red;
  border: 18px solid #eee;
  border-radius: 100%;
  width: 12px;
  height: 12px;
}