首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS绘图线

CSS绘图线
EN

Stack Overflow用户
提问于 2018-01-30 03:14:59
回答 3查看 117关注 0票数 0

有没有人知道如何在文本之间划出这些分界线,并作出反应?我已经工作了8个小时,我还在开始工作,我的大脑在燃烧。谢谢

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-01-30 06:17:43

我用bootstrap4来响应,用:after的背景做假钻孔,因为边框不能同时是梯度和半径。

代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-01-30 04:06:34

我最好的重现线条的方法

编辑改进了css,以获得更高的可伸缩性。

代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-01-30 04:13:53

改变颜色并享受它:

代码语言:javascript
运行
复制
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;
}
代码语言:javascript
运行
复制
<div></div>
<div></div>
<div></div>
<div></div>

票数 -3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48513335

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档