CSS制作各种图形

浏览：312次- 评论：1次- 发布时间：2020-05-27

Html

Css


    box1
    box2
    box3
    box4

.box1{
     width:240px;
     height:50px;
     line-height:50px;
     text-align:center;
     color:#FFF;

background-color:#3598dc;
     background: radial-gradient( circle at top left, transparent 8px,#3598dc 0 ) top left,
                        radial-gradient( circle at top right, transparent 8px,#3598dc 0 ) top right,
                        radial-gradient( circle at bottom right,transparent 8px, #3598dc 0 ) bottom right,
                        radial-gradient( circle at bottom left, transparent 8px,#3598dc 0 ) bottom left;
     background-size:50% 50%;
     background-repeat:no-repeat;
}

.box2{
     width:240px;
     height:70px;  /*改变高度不同的效果哦*/
     line-height:70px;
     color:#FFF;
     text-align:center;

background: #8BC34A;
     background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                        linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                        linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                        linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
     background-size: 50% 50%;
     background-repeat: no-repeat;    
}

.box3 { 
        width: 120px; 
	height: 80px; 
        color:#FFF;
	background: red; 
	position: relative; 
	-moz-border-radius: 10px; 
	-webkit-border-radius: 10px; 
	border-radius: 10px; 
        margin-left:20px;
} 
.box3:before { 
	content:"";
	position: absolute; 
	right: 100%; 
	top: 26px; 
	width: 0; 
	height: 0; 
	border-top: 15px solid transparent; 
	border-right: 25px solid red; 				
}

.box4 {
    width: 200px;
    height: 55px;
    line-height:55px;
    text-align:center;
    color:#FFF;
    
     background: #8BC34A;
     background: linear-gradient(135deg, transparent 0, #8BC34A 0) top left,
                        linear-gradient(-135deg, transparent 20px, #8BC34A 0) top right,
                        linear-gradient(-45deg, transparent 20px, #8BC34A 0) bottom right,
                        linear-gradient(45deg, transparent 0, #8BC34A 0) bottom left;
     background-size: 50% 50%;
     background-repeat: no-repeat; 
}

.box5{
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.4

立即下载收藏

积分说明：注册即送15牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：纯css绘制各种图形

讨论这个常用代码（1）回答他人问题或分享心得会奖励牛币

Lv2 入门

qq***02

2021年01月01日

厉害，很棒的代码

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取