我正在尝试在 css 中使用文本来实现这些相对的倾斜矩形:
第一个矩形设置在文本容器周围,文本以与矩形相反的方式倾斜。
HTML
<div class="col-lg-12 col-md-6">
<div class="container-fluid md">
<div class="rectangles rectangle-1">
<div class="text_container">
<?php if ($text) { ?> <div class="text WYSIWYG-styles"> <?= $text ?> </div> <?php } ?>
</div>
</div>
</div>
</div>
SCSS
display: block;
border: 1px solid $primary-color-2;
padding: 60px;
text-align: center;
&.rectangle-1 {
transform:skew(10deg, 10deg);
}
&.rectangle-2 {
transform: skew(-10deg, 10deg);
}
}
.text_container {
.text {
display: block;
transform: skew(-10deg, -10deg);
}
}
}
问题是让第二个矩形在同一平面上以相反的方式倾斜。我考虑过使用伪元素。我不认为那会奏效。显然,另一个内部 div 只会创建一个内部矩形。
这是我目前所拥有的:
任何帮助将不胜感激。
答案 0 :(得分:1)
我考虑过使用伪元素
是的,你可以像这样使用伪元素:
--target=arm-none-eabi
.double-skew {
position: relative;
text-align: center;
padding: 2rem;
max-width: 80%;
margin: 0 auto;
}
.double-skew:before, .double-skew:after {
content: "";
position: absolute;
border: 1px solid black;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.double-skew:before {
transform: skew(30deg);
}
.double-skew:after {
transform: skew(-30deg);
}
答案 1 :(得分:0)
您实际上只需要倾斜变换中的第一个参数即可实现此效果。第二个参数将使其垂直倾斜,如果您试图匹配规格图像,这不是您想要的。
我使用具有相对定位的父 div 创建了这个元素。在里面我有两个作为边框元素的跨度和一个包含文本的 p 元素。跨度是绝对定位的,因此它们不会影响 p 的位置,并且可以放置在彼此的顶部。最后,外部 div 是一个表格,内部 p 是一个表格单元格,因此我可以轻松地将 p 的内容与垂直和水平中心对齐。
这是使用纯 CSS 完成的,因此可以显示在片段中,但您也可以将其转换为 SASS。
bin/console cache:clear
div
{
display: table;
width: 400px;
height: 100px;
position: relative;
margin-left: 50px;
}
div span
{
display: block;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px solid black;
}
div span.left
{
transform: skew(30deg);
}
div span.right
{
transform: skew(-30deg);
}
div p
{
display: table-cell;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}