css绘制一些常用的简单图形

前言

整理了一些常用图形使用css绘制的方法，掘友们可以在项目中碰到类似场景直接复制代码或修改使用！

在线查看例子

三角形向上形状

// 图形-三角形向上形状
.shape-triangle-up {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #404040;
}

三角形向下形状

// 图形-三角形向下形状
.shape-triangle-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #404040;
}

三角形左侧形状

// 图形-三角形左侧形状
.shape-triangle-left {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 30px solid #404040;
  border-bottom: 15px solid transparent;
}

三角形右侧形状

// 图形-三角形右侧形状
.shape-triangle-right {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 30px solid #404040;
  border-bottom: 15px solid transparent;
}

三角形左上角形状

// 图形-三角形左上角形状
.shape-triangle-topleft {
  width: 0;
  height: 0;
  border-top: 30px solid #404040;
  border-right: 30px solid transparent;
}

三角形右上角形状

// 图形-三角形右上角形状
.shape-triangle-topright {
  width: 0;
  height: 0;
  border-top: 30px solid #404040;
  border-left: 30px solid transparent;
}

三角形左下角形状

// 图形-三角形左下角形状
.shape-triangle-bottomleft {
  width: 0;
  height: 0;
  border-bottom: 30px solid #404040;
  border-right: 30px solid transparent;
}

三角形右下角形状

// 图形-三角形右下角形状
.shape-triangle-bottomright {
  width: 0;
  height: 0;
  border-bottom: 30px solid #404040;
  border-left: 30px solid transparent;
}

梯形形状

// 图形-梯形形状
.shape-trapezoid{ 
  border-bottom: 30px solid #404040;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 30px;
}

平行四边形形状

// 图形-平行四边形形状
.shape-parallelogram {
  width: 40px;
  height: 30px;
  transform: skew(20deg);
  background: #404040;
}

聊天框形状

// 图形-聊天框形状
.shape-talkbubble {
  width: 40px;
  height: 30px;
  background: #404040;
  position: relative;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.shape-talkbubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 10px solid #404040;
  border-bottom: 6px solid transparent;
}

旗帜形状

// 图形-旗帜形状
.shape-flag {
  width: 40px;
  height: 30px;
  box-sizing: content-box;
  padding-top: 10px;
  position: relative;
  background: #404040; 
  text-align: center;
  text-transform: uppercase;
}
.shape-flag:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 10px solid #ebecef;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

圆锥形状

// 图形-圆锥形状
.shape-cone {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 40px solid #404040;
  border-radius: 50%;
} 

圆弧角标

// 图形-圆弧角标形状
.shape-curved-corner-topright {
  width: 40px;
  height: 40px;
  overflow: hidden;
  position: relative;
}
.shape-curved-corner-topright:before {
  content: "";
  display: block;
  width: 200%;
  height: 200%;
  position: absolute;
  border-radius: 50%;
}
.shape-curved-corner-topright:before {
  top: 0;
  right: 0;
  box-shadow: 20px -20px 0 0 #404040;
}

立体球形

// 图形-立体球形
.shape-ball{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: #404040;
  background: radial-gradient(circle at 25% 35%, #fff, #404040, #071529); 
}

标签形状

// 图形-标签形状
.shape-label{
  width:60px;
  height:40px;
  background:#404040;
  --mask: radial-gradient(8px at 8px 8px,#0000 98%,#000) -8px -8px;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}