css3制作图形

•   顶部弧度

 

.radian {
	width: 100%;
	height: 280rpx;
	background: linear-gradient(to bottom, #f6aa52 0%, #e9594e 100%);
	clip-path: ellipse(100% 100% at 50% 0%);
}

• 椭圆

 

.oval {
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 50px;
}

• 三角形

 

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

// 下三角
.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

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

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

// 左上三角
.triangle-top-left {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

// 右上三角
.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

// 左下三角
.triangle-bottom-left {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

// 右下三角
.triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

•  气泡

.bubble{
   width: 120px;
   height: 80px;
   background: red;
   border-radius:  10px;
   position: relative;
}
.bubble:before {
   content:"";
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
   position: absolute;
   right: 100%;
   top: 26px;
}

•  扇形

.sector {
   width: 0;
   height: 0;
   border-left: 70px solid transparent;
   border-right: 70px solid transparent;
   border-top: 100px solid red;
   border-radius: 50%;
}

•  十字

.cross {
   background: red;
   height: 100px;
   width: 20px;
   position: relative;
}
.cross:after {
   content: "";
   width: 100px;
   height: 20px;
   background: red;
   position: absolute;
   left: -40px;
   top: 40px;
}

横向梯形

.trapezoid_up{
    width:100px;
    height: 0;            
    border-bottom: 20px solid #f40;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.trapezoid_down{
    width:100px;
    height: 0;            
    border-top: 20px solid #000;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

 纵向梯形

.trapezoid_right{
    width:0;
    height: 100px;            
    border-left: 20px solid #000;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}
.trapezoid_left{
    width:0;
    height: 100px;            
    border-right: 20px solid #000;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}