如何在纯 html 和 css 中制作这些盒子？

Question

我想知道在容器中制作这样的角落的技术是什么。 https://modusgames.com/cris-tales/it/#

在本网站的 css 中，它们被称为。green-corners:before and:after，我很困惑。

Answer 1

他们使用了::after 和::before 并将它们放在容器的角落，这是代码。 注意：该形状不是代码的一部分，它只是一个.png，它是： https://modusgames.com/cris-tales/wp-content/themes/cristales-child/images/green-corner.png您使用absolute 将其移动到页面的任何位置并应用 position: 相对于您的 absolute 的父级然后使用宽度和高度来制作您想要的 img 并使用 top/left/right/bottom 来更改 img 位置，这就是你说的整个技术。

.green-corners:before {
        content: "";
        width: 80px;
        height: 80px;
        display: block;
        position: absolute;
        background: url(images/green-corner.png) 0 0 no-repeat;
        background-size: contain;
        top: 0px;
        left: 0px;
 }

Answer 2

他们使用 css pseudo选择器:after和:before作为带有图像和定位的装饰元素。 这是执行相同操作的基本示例：

也可以替换其他图像。 我刚刚添加了一个作为示例

 .box{ width: 300px; padding: 100px 20px; background: skyblue; position:relative; text-align:center; }.box:after,.box:before{ content:""; position:absolute; top:0; left:0; width: 50px; height:50px; background:orange; }.box:before{ background: url("https://modusgames.com/cris-tales/wp-content/themes/cristales-child/images/green-corner.png") center center no-repeat; background-size:cover; }.box:after{ left:auto; right:0; }.corners{ border: 2px solid black; padding: 20px; }.corners:after,.corners:before{ content:""; position:absolute; bottom:0; left:0; width: 50px; height:50px; background:orange; }.corners:after{ left:auto; right:0; }

 <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div class="corners">Some Content</div> </div>

希望这可以帮助 ！