Question

我遇到了这个简洁的小内容框：

content box with diagonal line

当我意识到它与我想在我的网站上做的事情相似时。在查看源代码后，我注意到他们使用的是图像，而不仅仅是CSS。我意识到我可以使用图像，但这确实打败了效率。我想知道是否有人知道如何通过简单的CSS来做到这一点？

我这样做的尝试以我无法弯曲边界而告终。例如，这是我尝试过的：

<style>
 #container {
border: 1px solid black;
}
#header {
background: red;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
#box {
padding: 10px;
}
</style>
<body>
<div id="container">
<span id="header">test</span>
<div id="box">
test
</div>
</div>

不幸的是，这看起来与他们的表现完全不同。而且，我甚至不确定是否使用跨度是好的。但在这种情况下，我认为是，因为更多的内容可以添加到框的右侧，而不是div占用所有的线（我认为）。有谁知道更好的方法吗？

Answer 1

您可以使用一个伪元素和边框来创建线条：

<强> DEMO

输出：

box with angled border

span{
    position:relative;
    display:inline-block;
    overflow:hidden;
    padding:.5em 5em 1.5em .5em;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
span:before{
    content:'';
    position:absolute; 
    width:100%; height:100%;
    right:1em;bottom:1em;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    
    webkit-transform-origin: 100% 0;
    -ms-transform-origin:100% 0;
    transform-origin:100% 0;
        
    webkit-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);
}

<span>FIND YOUR IMAGE</span><br/>
<span>short</span><br/>
<span>FIND YOUR IMAGE and another longer one</span><br/>
<span>FIND YOUR IMAGE and another longer one<br/>FIND YOUR IMAGE and another longer one</span>

Answer 2

嗯，我刚刚做了这个，你使用1个带有伪元素的元素，可能需要更多的调整！

#header {
    display: inline-block;
    border-bottom: solid 1px gray;
    padding: 10px;
    position: relative;
}
#header:after {
    position: absolute;
    right:-17px;
    top:-7px;
    bottom:-8px;
    content: "";
    display: block;
    width: 0px;
    border-left:solid 1px gray;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    transform: rotate(40deg);
}

enter image description here

<强> Check it out.

只需添加左侧填充，即可添加更多标题：

enter image description here

Check it out.

最有效的方式来创建对角内容框？

2 个答案: