所需的五边形形状,右方向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

你可以直接使用svg.

<svg width="150" height="150">
  <path d="M0,0 h125 l25,75 l-25,75 h-125z" fill="#4275FF" />
</svg>

您可以使用svg's clipPath并foreignObject导入divinto svg元素并将内联clipPath应用于跨浏览器支持.

浏览器支持此方法

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 2

UPDATE

您可以使用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>

您可以使用伪元素 - 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和其他技术的支持