div周围的边界不完整
The*_* Oz 22 html css css3 css-shapes
我正在寻找一种方法来创建一个不完整的正方形,边框包含一些文本和纯css的背景.这是我想要实现的目标:
我最初的想法是基于三个形状创建形状,然后相应地着色边框:
但我有点担心自适应版本 - 缩放三种形状.所以也许更好的主意,任何人？
Kri*_*ish 25
你可以用CSS伪作::after和::before,这样的事情
.incomplete-box{
border: solid 1px #fff;
border-right: none;
width: 100px;
height: auto;
position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
content: '';
position: absolute;
height: 30%;
width: 1px;
background-color: #fff;
right: 0;
}
.incomplete-box::after{
top: 0;
}
.incomplete-box::before{
bottom: 0;
}
演示
固定宽度和高度:https://jsfiddle.net/nikhilvkd/qt5ne3yw/
自动宽度和高度:https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/
Nen*_*car 22
完整设计 小提琴
.square {
width: 200px;
height: 300px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
position: relative;
}
.square:before, .square:after {
content: "";
height: 20%;
position: absolute;
right: 0;
border-right: 1px solid gray;
}
.square:before {
bottom: 0;
}<div class="square"></div>或SVG
line {
stroke: #6996FB;
stroke-width: 2;
}
svg {
overflow: visible;
}
button {
padding: 10px 50px;
border: none;
color: white;
margin-right: 10px;
margin-top: 15px;
}
.btn-blue {
background: #5D8CFF;
}
.btn-green {
background: #33F1D9;
}
h3 {
margin: 0;
}<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="1" x2="250" y2="1"></line>
<line x1="0" y1="300" x2="250" y2="300"></line>
<line x1="1" y1="1" x2="1" y2="300"></line>
<line x1="249" y1="0" x2="249" y2="70"></line>
<line x1="249" y1="230" x2="249" y2="300"></line>
<foreignobject x="60" y="90" width="400" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing elit. Suscipit</h3>
<button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button>
</body>
</foreignobject>
</svg>web*_*iki 15
这种方法允许您:
- 添加任何内容,无论内容的高度或宽度如何,边框都会围绕它进行调整
- 支持透明背景,可以在图像或非纯色上显示
- 不添加任何非语义元素
它依赖于2个绝对定位的伪元素和一个div.内容和边框之间的间距由div上的填充控制:
div{
position:relative;
display:inline-block;
padding:50px 100px;
border-left:1px solid #000;
text-align:center;
}
div:before, div:after{
content:'';
position:absolute;
right:50%; left:0;
height:50px;
border-right:1px solid #000;
}
div:before{
top:0;
border-top:1px solid #000;
}
div:after{
bottom:0;
border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}<div>
<h2>This is a very long title on<br/> 2 lines</h2>
<button>Button</button>
<p>Some text</p>
</div>- 虽然我收到了很多不错的答案,但我会选择这个作为最多才多艺的答案. (2认同)
Jin*_*ian 10
好吧,按照上面的答案,我建议使用pseudo元素来实现这个效果.
但是有另一种方法可以在不使用伪元素的情况下实现这一目标.
这是你应该怎么做的.
.row{display:table;table-layout:fixed;}
.col{display:table-cell;}
.row{width:250px; margin: auto;}
.mid.row > .col{ height: 100px; }
.col{ text-align: center;}
.top.col, .bottom.col{
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
height: 50px;
}
.bottom.col{
border-top: 0;
border-bottom: 1px solid black;
}
.mid.row > .col{
border-left: 1px solid black;
border-right: 0;
vertical-align: middle;
text-align: right;
}
.mid.row > .col span{
margin-right: -30px;
max-width: 300px;
}<div class="row">
<div class="top col"></div>
</div>
<div class="mid row">
<div class="col">
<span>Hey you can achieve this without using pseudo elements :)</span>
</div>
</div>
<div class="row">
<div class="bottom col"></div>
</div>