Question

HTML

<div id="DiamondCenter">
    <div id="triangle-topleft"></div>
</div>

CSS

#DiamondCenter {
    position:fixed;
    top:2%;
    left:48%;
    background: #24201a;
    height:40px;
    width:40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index:20 !important;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid gray;
    border-right: 40px solid transparent;
}

Answer 1

使用SVG ：

使用SVG时，您可以使用path和polyline元素绘制所需的形状。正如Paulie_D在评论中指出的那样，对于这种复杂的形状而不是CSS，SVG是更好的选择（虽然这也可以用CSS实现）。

方法很简单，如下：

顶部多边形的一个path元素，通过连接坐标(0,50)，(50,0)，(100,50)和(50,70)处的点来绘制。
底部多边形的另一个path元素，通过加入(0,50)，(50,70)和(100,50)处的点来绘制。
橙色边框的一个polyline元素，它只是连接(0,50)，(50,70)和(100,50)的一条线。

＆＃13;

svg {
  height: 100px;
  width: 100px;
}
path#top {
  fill: gray;
}
path#bottom {
  fill: black;
}
polyline#border {
  stroke: orange;
  stroke-width: 2;
  fill: none;
}

＆＃13;

<svg viewBox="0 0 100 100">
  <path id="top" d="M0,50 L50,0 100,50 50,70z" />
  <path id="bottom" d="M0,50 L50,100 100,50 50,70z" />
  <polyline id="border" points="0,50 50,70 100,50" />  
</svg>

＆＃13;

使用CSS：

您可以使用2个旋转和倾斜的伪元素来实现所提供的形状。使用毕达哥拉斯定理计算每个伪元素的维数。

使用此方法生成的形状具有响应性，可以适应尺寸的变化。将形状悬停在代码段内以查看其如何适应。

＆＃13;

*,
*:after,
*:before {
  box-sizing: border-box;
}
#DiamondCenter {
  position: fixed;
  top: 2%;
  left: 48%;
  background: #24201a;
  height: 40px;
  width: 40px;
  transform: rotate(45deg);
  z-index: 20 !important;
  overflow: hidden;
}
#DiamondCenter:after {
  position: absolute;
  content: '';
  bottom: 0px;
  left: -1px; /* half the width of border-left */
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  background: black;
  border-left: 2px solid orange;
  transform: rotate(40deg) skewX(-20deg);
  transform-origin: bottom left;
}
#DiamondCenter:before {
  position: absolute;
  content: '';
  top: -1px; /* half the width of border-top */
  right: 0px;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  background: black;
  border-top: 2px solid orange;
  transform: rotate(-40deg) skewY(-20deg);
  transform-origin: top right;
}

/* Just for demo */

#DiamondCenter{
  transition: all 1s;
}
#DiamondCenter:hover{
  top: 5%;
  height: 80px;
  width: 80px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="DiamondCenter"></div>

＆＃13;

在下面的代码片段中，我为伪元素设置了不同的背景颜色，以说明如何实现形状。

＆＃13;

*,
*:after,
*:before {
  box-sizing: border-box;
}
#DiamondCenter {
  position: fixed;
  top: 2%;
  left: 48%;
  background: #24201a;
  height: 40px;
  width: 40px;
  transform: rotate(45deg);
  z-index: 20 !important;
  overflow: hidden;
}
#DiamondCenter:after {
  position: absolute;
  content: '';
  bottom: 0px;
  left: -1px;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  background: seagreen;
  border-left: 2px solid orange;
  transform: rotate(40deg) skewX(-20deg);
  transform-origin: bottom left;
}
#DiamondCenter:before {
  position: absolute;
  content: '';
  top: -1px;
  right: 0px;
  height: calc(100% / 1.414);
  width: calc(100% / 1.414);
  background: skyblue;
  border-top: 2px solid orange;
  transform: rotate(-40deg) skewY(-20deg);
  transform-origin: top right;
}

/* Just for demo */

#DiamondCenter{
  transition: all 1s;
}
#DiamondCenter:hover{
  top: 5%;
  height: 80px;
  width: 80px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="DiamondCenter"></div>

＆＃13;

Answer 2

在CSS中完成这是一个相当复杂的形状，但正如其他人所示，它是可能的。

一个很好的选择虽然是使用SVG。它是一个矢量图形，因此它可以很好地扩展以获得响应，并得到很好的支持（CanIUse）

<svg width="50%" height="50%" viewBox="0 0 10 10">
  <path d="M5,1
           L9,5
           L5,9
           L1,5z" fill="grey" />
  <path d="M1,5
           L5,6
           L9,5
           L5,9z" stroke="orange" stroke-width=".1" stroke-dasharray="0,0,8.23,15" />
</svg>

Answer 3

你可以使用这个css创建钻石形状，假设这是你想要的div，上面的形状id应该与css相同（切割钻石）

 #cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

JSFiddle Demo

如何用div里面的CSS写下以下形状？

HTML

CSS

3 个答案: