所需的五边形形状，右方向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的{​​{1}}和clipPath将foreignObject导入div元素并应用内联svg跨浏览器支持。

<强> Browser Support for this approach

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>：pseudo-element。

上使用三角形

:after

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添加图像而不是纯色。

<div></div>

#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;
}

Answer 2

更新

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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用此方法：

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

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

FIDDLE 和代码段：

＆＃13;

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

输出