当前位置 : 主页 > 网页制作 > css >

如何用css制作这种双线形状?

来源:互联网 收集:自由互联 发布时间:2021-06-13
是否可以使用CSS制作橙色双垂直线形状? (见下图).这是我网站上的推荐部分,必须与文本一起垂直扩展. 非常感谢! 这个例子是最好的例子,它们有什么背景或者页面有什么关系.它自动扩
是否可以使用CSS制作橙色双垂直线形状? (见下图).这是我网站上的推荐部分,必须与文本一起垂直扩展.

非常感谢!

这个例子是最好的例子,它们有什么背景或者页面有什么关系.它自动扩展.尝试在游乐场演示页面中编写文本并查看!

Playground page

HTML

<div class='striped'>
  <p contenteditable>
    Is it possible to make that orange double vertical line shape with CSS? 
    (see image bellow). This is for a testimonials section on my site that has 
    to expand vertically along with the text. try editing this test and watch!
  </p>
</div>

SCSS CSS

.striped{ 
  font-size:20px; 
  padding:0 0 10px 3.5em; 
  width:350px; 
  position:relative;
}

.striped::before{
    content:'';
    position:absolute;
    left:10px; top:0; bottom:0;
    border-right:26px double orange;
    border-bottom:26px solid transparent;
}
网友评论