纯css绘制各种图形

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;
}
</style>
<div>
    <p class="box1">box1</p>
    <p class="box2">box2</p>
    <p class="box3">box3</p>
    <p class="box4">box4</p>
    <p class="box5"></p>
</div>

在线运行

猜你喜欢

评论 0

立即评论