CSS 绘图【汇总】

<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;
 }

border-radius: 50%;
 

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

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

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

<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>
• 1

.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;
}