是否可以在 css 和 html 中制作这个几何图形？

Question

是否可以在 css 和 html 中制作这个几何图形？ 什么都找不到。 你能帮助我吗？

Answer 1

您也可以使用 CSS 中的伪类来实现此布局。 根据您的整体布局，试试这个：

 html { background-color: slategray; }.box-holder { width: 400px; height: 300px; position: relative; margin: 30px; }.cap { position: relative; height: 10%; width: 100%; }.middle { background-color: #000; position: absolute; left: 7.5%; width: 85%; height: 100%; z-index: 1; }.cap.middle:before { content: ""; display: block; background-color: #fff; height: 7px; width: 103%; position: absolute; left: -1.5%; }.content { width: 100%; height: 80%; background-color: #000; position: relative; z-index: 1; }.content:before { content: ""; display: block; height: 104%; width: 7px; background-color: #fff; position: absolute; top: -2%; left: 0; }.content:after { content: ""; display: block; height: 104%; width: 7px; background-color: #fff; position: absolute; top: -2%; right: 0; }.top-cap.middle:before { top: 0; }.bottom-cap.middle:before { bottom: 0; }.corner { width: 7.5%; height: 100%; overflow: hidden; position: absolute; }.corner:before { content: ""; display: block; width: 130%; height: 130%; position: absolute; border-radius: 0; border: 30px solid #000; }.corner:after { content: ""; display: block; width: 117.5%; height: 117.5%; position: absolute; border-radius: 0; border: 7px solid #fff; }.top-cap.corner-left { top: 0; left: 0; }.top-cap.corner-left:before { top: -150%; left: -150%; }.top-cap.corner-left:after { top: -75%; left: -75%; }.top-cap.corner-right { top: 0; right: 0; }.top-cap.corner-right:before { top: -150%; right: -150%; }.top-cap.corner-right:after { top: -75%; right: -75%; }.bottom-cap.corner-left { bottom: 0; left: 0; }.bottom-cap.corner-left:before { bottom: -150%; left: -150%; }.bottom-cap.corner-left:after { bottom: -75%; left: -75%; }.bottom-cap.corner-right { bottom: 0; right: 0; }.bottom-cap.corner-right:before { bottom: -150%; right: -150%; }.bottom-cap.corner-right:after { bottom: -75%; right: -75%; }

 <div class="box-holder"> <div class="top-cap cap"> <div class="corner-left corner"></div> <div class="middle"></div> <div class="corner-right corner"></div> </div> <div class="content"> </div> <div class="bottom-cap cap"> <div class="corner-left corner"></div> <div class="middle"></div> <div class="corner-right corner"></div> </div> </div>