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

概述FIDDLE HTML <div id="DiamondCenter"> <div id="triangle-topleft"></div></div> CSS #DiamondCenter { position:fixed; top:2%; left:48%; background: #24201a; height:40px; width FIDDLE

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

解决方法 使用SVG：

在使用SVG时,您可以使用路径和折线元素来绘制所需的形状.正如PaulIE_D在评论中指出的那样,SVG是这种复杂形状而不是CSS的更好选择(尽管这也可以用CSS实现).

方法很简单,如下：

>顶部多边形的一个路径元素,通过连接坐标(0,50),(50,0),(100,50)和(50,70)处的点绘制.
>底部多边形的另一个路径元素,通过连接(0,70)和(100,50)处的点绘制.
>橙色边框的一条折线元素,只不过是连接(0,50)的线.

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

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

使用CSS：

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

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

*,*: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;}

<script src="https://cdnjs.cloudflare.com/AJAX/libs/prefixfree/1.0.7/prefixfree.min.Js"></script><div ID="DiamondCenter"></div>

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

*,*: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;}

<script src="https://cdnjs.cloudflare.com/AJAX/libs/prefixfree/1.0.7/prefixfree.min.Js"></script><div ID="DiamondCenter"></div>

总结

以上是内存溢出为你收集整理的html – 如何用div里面的CSS写下以下形状？全部内容，希望文章能够帮你解决html – 如何用div里面的CSS写下以下形状？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。