具有正确方向 CSS 和 HTML 的所需五边形

Question

我如何在没有-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%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* Center the demo */
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div></div>

Answer 1

您可以使用这种方法：

• 将主元素旋转 45 度。添加overflow: hidden;。
• 添加一个伪元素并取消转换它。将其正确放置在主要元素中。

将鼠标悬停在图像上以查看其工作原理：

FIDDLE 和 sn-p：

body {
  background: url(http://lorempixel.com/640/480);
}
div {
  height: 200px;
  width: 200px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: relative;
  overflow: hidden;
  top: 50px;
  left: 50px;
}
div:before {
  content: "";
  position: absolute;
  left: 100px;
  height: 141px;
  width: 212px;
  display: block;
  background: url(http://i.imgur.com/mI2OFTB.jpg);
  background-size: 100%;
  transform-origin: 0% 0%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Just for demonstration of working*/

div:hover {
  overflow: visible;
  background: rgba(25, 50, 75, 0.6);
}

<div></div>

输出：

Answer 2

您可以直接使用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,0 h125 l25,75 l-25,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,0 h125 l25,75 l-25,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>

Answer 3

更新

您可以使用currentcolor 破解背景图像。

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0
}
:root{
    background: red
}
div{
    margin: 20px auto;
    background: url(http://i.imgur.com/mI2OFTB.jpg);
    background-size: cover;
    width: 300px;
    height: 200px;
    position:relative;
    color: red
}
div:before,div:after{
    content: "";
    position: absolute;
    color: currentcolor;
    right: 0;
    border-left: 100px solid transparent
}
div:before{
    border-bottom: 100px solid currentcolor;
    bottom: 0
}
div:after{
    border-top: 100px solid currentcolor
}

<div></div>

你可以使用Pseudo-elements - CSS

div{
  width: 200px;
  height: 200px;
  background: green;
  position: relative
    
}
div:before{
  content: '';
  position: absolute;
  top: 0;
  left: 100%;  /*We put it 100% far from left so that it start at the eage of the right border*/
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 50px solid green; /*set the width of your triangle and border-left beause we want the triangle to point in the right direction */
}

<div><div/>

您可以随时在caniuse.com上查看兼容性表，了解各种浏览器中对 HTML5、CSS3、SVG 和其他技术的支持

Answer 4

<div id="pentagon"></div>
<style>
  #pentagon {
    margin-top:45px;
    position: relative;
    width: 54px;
    border-width: 50px 24px 0px 0px;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 54px;
    top: -85px;
    border-width: 0px 24px 35px 0px;
    border-style: solid;
    border-color: transparent transparent red;
}
</style>