css3制作图形

　康　

已于 2023-02-20 12:17:26 修改

阅读量175

点赞数

分类专栏： css 文章标签： css3 前端

于 2022-06-14 15:49:12 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/125279373

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

顶部弧度

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