有没有人知道如何在文本之间划出这些分界线,并作出反应?我已经工作了8个小时,我还在开始工作,我的大脑在燃烧。谢谢
发布于 2018-01-30 06:17:43
我用bootstrap4来响应,用:after
的背景做假钻孔,因为边框不能同时是梯度和半径。
.row {
margin-top: 4px;
}
.fakeimage {
border: 1px solid black;
height: 100%;
}
.left-bordered {
background: white;
border-right: 0 none;
border-radius: 20px 0 0 20px;
padding: 10px;
position: relative;
}
.left-bordered:after {
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: 50%;
background: linear-gradient(red, blue);
content: "";
z-index: -1;
border-radius: 20px 0 0 20px;
}
.right-bordered {
background: white;
border-left: 0 none;
border-radius: 0 20px 20px 0;
padding: 10px;
position: relative;
}
.right-bordered:after {
position: absolute;
top: -4px;
bottom: -4px;
right: -4px;
left: 50%;
background: linear-gradient(blue, red);
content: "";
z-index: -1;
border-radius: 0 20px 20px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-8">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
<div class="col-4">
<div class="fakeimage"></div>
</div>
</div>
<div class="row">
<div class="col-10 offset-2 left-bordered">
<div class="row">
<div class="col-3">
<div class="fakeimage"></div>
</div>
<div class="col-9">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 right-bordered">
<div class="row">
<div class="col-8">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
<div class="col-2">
<div class="fakeimage"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 offset-2 left-bordered">
<div class="row">
<div class="col-3">
<div class="fakeimage"></div>
</div>
<div class="col-9">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 right-bordered">
<div class="row">
<div class="col-8">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
<div class="col-2">
<div class="fakeimage"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 offset-2 left-bordered">
<div class="row">
<div class="col-3">
<div class="fakeimage"></div>
</div>
<div class="col-9">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-10 right-bordered">
<div class="row">
<div class="col-8">
<h3>xxxxxxxxxxxx xxxxxxxxxxxxxxxx</h3>
<p>xxx xxxxxxx xxxxx xx xxxx xxx xxxx xxx xxxxxxx xxxx xxx xxxx xxx xxxx</p>
</div>
<div class="col-2">
<div class="fakeimage"></div>
</div>
</div>
</div>
</div>
</div>
发布于 2018-01-30 04:06:34
我最好的重现线条的方法
编辑改进了css,以获得更高的可伸缩性。
.line {
height: 50px;
width: 150px;
}
.line:not(.first){
margin-top: -1px;
}
.right-side {
margin-left: 15px;
}
.line1 {
border-bottom: 1px blue solid;
border-left: 1px blue solid;
border-bottom-left-radius: 15px;
}
.line2 {
border-top: 1px blue solid;
border-right: 1px blue solid;
border-top-right-radius: 15px;
}
.line3 {
border-right: 1px red solid;
border-bottom: 1px red solid;
border-bottom-right-radius: 15px;
}
.line4 {
border-top: 1px red solid;
border-left: 1px red solid;
border-top-left-radius: 15px;
}
<div class="line first line1">
</div>
<div class="line right-side line2">
</div>
<div class="line right-side line3">
</div>
<div class="line line4">
</div>
发布于 2018-01-30 04:13:53
改变颜色并享受它:
body {
position: relative;
padding: 30px;
}
div {
width: 400px;
height: 200px;
}
div:nth-child(1) {
border-right: 3px solid #000;
border-radius: 0px 0px 10px 0px;
border-bottom: 3px solid #000;
}
div:nth-child(2) {
border-left: 3px solid #000;
border-radius: 10px 0 0 0;
border-top: 3px solid #000;
position: absolute;
top: 230px;
left: 20px;
}
<div></div>
<div></div>
<div></div>
<div></div>
https://stackoverflow.com/questions/48513335
复制相似问题