使用html怎么打矩形形状,html – CSS – 如何制作带尖边的矩形？

诀窍是使用伪类：before和：after.试试这样：

.yourButton {

position: relative;

width:200px;

height:40px;

margin-left:40px;

color:#FFFFFF;

background-color:blue;

text-align:center;

line-height:40px;

}

.yourButton:before {

content:"";

position: absolute;

right: 100%;

top:0px;

width:0px;

height:0px;

border-top:20px solid transparent;

border-right:40px solid blue;

border-bottom:20px solid transparent;

}

.yourButton:after {

content:"";

position: absolute;

left: 100%;

top:0px;

width:0px;

height:0px;

border-top:20px solid transparent;

border-left:40px solid blue;

border-bottom:20px solid transparent;

}