在同一个 div 上添加 2 :before :after 以创建 2 个三角形

Question

我有以下内容，我正在用 css.

创建一个三角形（看起来有边框）

我想创建另一个三角形，完全相同，但在第一个三角形右侧约 50px。

你会怎么做这两个 :before's :after's ???

HTML

<div class="section-modules">
    <div class="my-account">
        <div class="section-module-light">
            <h3>Register Here</h3>
            <p>It’s quick and easy and you’ll be the first to know about new bits we release.</p><a href="#" class="btn btn-blank">Register Now</a>
        </div>
    </div>
</div>

CSS

.section-module-light:after, 
.section-module-light:before {
    content: '';
    position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: transparent;
    color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
    bottom: -0px;
    left: 150px;
    border-width: 36px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
    bottom: -1px;
    left: 150px;
    border-width: 34px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
}

JSfiddle Here

Answer 1

您不需要创建具有单独描边和填充的三角形，使用 css3 变换旋转。然后你可以在第一个三角形上使用 before，在第二个三角形上使用 after。

display: block;
width: 34px;
height: 34px;

transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;

在此处查看完整代码：http://jsfiddle.net/07jfLdwL/

Answer 2

您可以使用CSS3变换旋转属性。请参阅文档。

在同一个 div 上添加 2 :before :after 以创建 2 个三角形

add 2 :before's :after's on same div to create 2 triangles

html

css

pseudo-class