Question

image1

我正在尝试在这个图像中创建3个divs。现在，我有代码，但问题是，前/后元素不能用自己的div和text扩展。我需要让它们响应，所以在小屏幕中，它们会在另一个屏幕下。这是与bootstrap和scss代码的链接：http://www.bootply.com/qYUhoNymFI

Answer 1

scss代码未应用于您的链接，因此我在最后添加了经典CSS，以向您展示创建三角形的方法。

以下是我添加的代码：

.shipping,
.support {
    position: relative;
    background: #d7b789;
    color: white;
    text-align: center;
}
.returns {
    position: relative;
    background: black;
    color: white;
    text-align: center;
}
.shipping:before,
.returns:before,
.returns:after,
.support:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 32px transparent;
    width: 32px;
    height: 32px;
}
.returns:before {
    left: 0px;
    border-left-color: white;
}
.returns:after {
    right: 0px;
    border-right-color: white;
}
.shipping:before {
    right: -64px;
    border-left-color: #d7b789;
    z-index: 1;
}
.support:after {
    left: -64px;
    border-right-color: #d7b789;
    z-index: 1;
}

Bootply

我在这里做的是设置背景颜色以匹配示例。然后我将width，height（等于父div的{{1}}的一半）和height设置为border我们想要before，并将after设置为border-color。在每个“transparent和before上，您可以在要启动三角形的一侧定义after。然后，您必须将border-color和left放在权利元素上，以便将它们放置在您想要的位置。

注意我在第一个和最后一个块上添加的right，以确保三角形超过中间块

现在您可以将其转换为scss以优化代码。例如，为多个z-index前缀创建一个mixin，这样您就不必在任何地方重复它们。为transform的{{1}}（示例中为div）添加变量，并将其用于height（64px），并替换border-width和$height / 2也使用此变量。

尝试使用bootstrap和scss制作具有三角形形状的div

1 个答案: