尝试使用引导程序和 scss 制作具有三角形形状的 div答案

【问题标题】：trying to make divs with a triangle shape with bootstrap and scss尝试使用引导程序和 scss 制作具有三角形形状的 div
【发布时间】：2016-09-22 16:44:30
【问题描述】：

image1

我正在尝试在引导程序中制作 3 个 div，就像在这张图片中一样。现在，我有了代码，但问题是，之前/之后的元素不能随自己的 div 和文本缩放。我需要让它们响应，所以在小屏幕上，它们会一个接一个。这里是引导和 scss 代码的链接：http://www.bootply.com/qYUhoNymFI

【问题讨论】：

标签： html css twitter-bootstrap sass

【解决方案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的height的一半）和border设置为我们想要的before和after，并设置它们的@987654330 @到transparent。然后在每个 'before 和 after 上，在要让三角形开始的一侧定义一个 border-color。然后，您必须将 left 和 right 放在权限元素上，以便将它们放置在您想要的位置。

注意z-index我添加在第一个和最后一个块上，这样你就可以确定三角形越过中间块

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

【讨论】：