Creates a content container with a triangle at the top.
:before
and :after
pseudo-elements to create two triangles.border-color
and the container's background-color
respectively.border-width
of the one triangle (:before
) should be 1px
wider than the other one (:after
), in order to act as the border.:after
) should be 1px
to the right of the larger triangle (:before
) to allow for its left border to be shown.<div class="container">Border with top triangle</div>
.container {
position: relative;
background: #ffffff;
padding: 15px;
border: 1px solid #dddddd;
margin-top: 20px;
}
.container:before,
.container:after {
content: '';
position: absolute;
bottom: 100%;
left: 19px;
border: 11px solid transparent;
border-bottom-color: #dddddd;
}
.container:after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #ffffff;
}
CSS, Visual
Creates a card that displays additional content on hover.
CSS, Visual
Creates a triangular shape with pure CSS.
CSS, Visual
Creates a horizontally scrollable image gallery.