CSS Border DIV作为形状

普通怪胎

我有一个div包含一些文本的元素。我想在左上角和右下角添加边框，以创建盾牌或波峰轮廓效果，类似于以下内容；

我还希望边界尽可能做出回应。我在弄清楚如何执行此操作时遇到了一些困难。

这是我创建的小提琴的链接。

到目前为止，我的代码是；

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  border-top: 10px solid black;
  background: #3beadc;
}

.borderLeft {
  border-left: 10px solid black;
  position: absolute;
  top: 0;
  bottom: 50%;
}

<div id="mainDiv">
  <div class="borderLeft">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
  </div>
</div>

任何帮助表示赞赏。

Sergio Tx

您可以使用:before和:after伪元素创建小边框。也许不是最好的方法，但是它可行：

#mainDiv {
  height: 500px;
  width: 500px;
  position: relative;
  padding: 10px 15px;
  background: #3beadc;
  border-radius: 0 0 100px 0;
}

#mainDiv:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100px;
  width: 100px;
  border-top: 10px solid black;
  border-left: 10px solid black;
}

#mainDiv:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
  border-radius: 0 0 100px 0;
}

<div id="mainDiv">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit quis est vel fringilla. Quisque eget tellus sed est vulputate varius. Quisque scelerisque lobortis molestie. Ut libero lorem, consequat quis commodo et, porttitor et sapien.
      Donec tristique purus eget nunc tincidunt ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat pellentesque pharetra. Donec imperdiet ex metus. Vestibulum nulla ligula, semper vel odio ut, ornare pellentesque arcu. Sed
      neque lectus, fermentum non ultricies id, sollicitudin eget turpis.</p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-21

我来说两句

0 条评论

登录后参与评论

上一篇：有无序集合的Python数据类型吗？

CSS Border Radius问题

CSS Single Div绘图-形状

CSS Border DIV作为形状

CSS Border DIV作为形状

Linux的官方Adobe Flash存储库是否已过时？

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

如何检查字符串输入的格式

如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

Modbus Python施耐德PM5300

错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

用日期数据透视表和日期顺序查询

检查嵌套列表中的长度是否相同

Java Eclipse中的错误13，如何解决？

ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

如何监视应用程序而不是单个进程的CPU使用率？

如何自动选择正确的键盘布局？-仅具有一个键盘布局

ES5的代理替代

在令牌内联程序集错误之前预期为 ')'

有什么解决方案可以将android设备用作Cast Receiver？

套接字无法检测到断开连接

如何在JavaScript中获取数组的第n个元素？

如何将sklearn.naive_bayes与（多个）分类功能一起使用？

应用发明者仅从列表中选择一个随机项一次

在Windows 7中无法删除文件（2）

ggplot：对齐多个分面图-所有大小不同的分面