html代码设置五边形,所需的五边形形状,正确的方向CSS和HTML

你可以直接使用svg.

您可以使用svg的clipPath和foreignObject将div导入svg元素并应用内联clipPath以支持跨浏览器.

div {

width: 150px;

height: 150px;

background: #4275FF;

}

使用图像而不是纯色.

或者,您可以在：after：pseudo-element上使用三角形.

div {

position: relative;

width: 125px;

height: 150px;

background: #4275FF;

}

div:after {

content: '';

position: absolute;

width: 0;

height: 0;

border-top: 75px solid transparent;

border-bottom: 75px solid transparent;

border-left: 25px solid #4275FF;

right: -25px;

}

使用CSS添加图像而不是纯色.

#main-container {

width: 150px;

height: 150px;

overflow: hidden;

}

#container,#shape {

position: relative;

width: 200px;

height: 195px;

transform: rotate(-20deg) translate(-46px,-40px);

overflow: hidden;

-webkit-backface-visibility: hidden;

}

#shape {

position: relative;

height: 500px;

transform: rotate(40deg) translateY(-50%);

left: -219px;

top: 112px;

}

#shape:after {

position: absolute;

content: '';

width: 150px;

height: 150px;

background: url(http://lorempixel.com/150/150);

transform: rotate(-20deg);

margin: 70px 0 0 52px;

}