如何在不使用-webkit-clip-path的情况下制作这种类型的五角形,因为它不适用于Firefox,IE9等大多数浏览器.
我的代码：http://codepen.io/anon/pen/MYbKrQ
div {
width: 150px;
height: 150px;
background: #1e90ff;
-webkit-clip-path: polygon(0% 0%,75% 0%,100% 50%,75% 100%,0% 100%);
clip-path: polygon(0% 0%,0% 100%);
}
/* Center the demo */
html,body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
<div></div>
解决方法
你可以直接使用svg.
<svg width="150" height="150"> <path d="M0,0 h125 l25,75 l-25,75 h-125z" fill="#4275FF" /> </svg>
您可以使用svg的clipPath和foreignObject将div导入svg元素并应用内联clipPath以支持跨浏览器.
Browser Support for this approach
div {
width: 150px;
height: 150px;
background: #4275FF;
}
<svg width="150" height="150">
<defs>
<clipPath id="shape">
<path d="M0,75 h-125z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="100%" height="100%">
<div></div>
</foreignObject>
</svg>
使用图像而不是纯色.
<svg width="150" height="150">
<defs>
<clipPath id="shape">
<path d="M0,75 h-125z" />
</clipPath>
</defs>
<image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/150/150/" width="100%" height="100%" />
</svg>
或者,您可以在：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;
}
<div></div>
使用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;
}
<div id="main-container">
<div id="container">
<div id="shape">
</div>
</div>
</div>
