Question

是否可以仅使用html和css来设计图像中显示的内容？

如果是，怎么样？

如果否，有什么替代方案？

创建具有2个彩色角落的透明图像，并将其作为背景图像应用于保存文本的div。有没有更好的方法呢？

我喜欢使用html和css，因为它比使用图像更灵活。

我添加了我尝试过的代码。请检查。得到了理想的输出。但我想知道是否可以进行任何改进？

enter image description here

<style>
#rules
{
     width:200px;
     height:100px;
}
#rules .top, #rules .bottom
{
    width:200px;
    height:10px;
    float:left;
}
#rules .top::before
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
}
#rules .left, #rules .right
{
    width:200px;
    float:left;
    height:30px;
}

#rules .left::before
{
    content:"";
    display:inline-block;
    width:10px;
    height:30px;
    background-color:#000;
}
.center
{
    width:200px;
    height:20px;
    float:left;
    text-align:center;
}
#rules .right::after
{
    content:"";
    display:block;
    width:10px;
    height:30px;
    background-color:#000;
    float:right;
}
#rules .bottom::after
{
    content:"";
    display:inline-block;
    width:40px;
    height:10px;
    background-color:#000;
    float:right;
}
</style>
</head>

<body>
<div id="rules">
    <div class="top"></div>
    <div class="left"></div> 
    <div class="center">RULES</div> 
    <div class="right"></div>
    <div class="bottom"></div>         
</div>
</body>

Answer 1

就个人而言，我使用psuedo-elements实现了这个效果。对每个角使用::before和::after，并以您想要的颜色使用其左侧和顶部（分别为右侧和底部）边框。然后，您可以设置它们的宽度和高度。务必将“隐藏”边框设置为零宽度，这样就不会出现斜角。

如果您在实施此问题时遇到问题，请随时回复您尝试过的代码：）

如何在背景图像中添加彩色边角？

1 个答案: