Separating two different blocks with SVG shapes creates a more interesting visual appearance than standard horizontal separation.
HTML CODE:
<div class="shape-separator">
</div>
CSS CODE:
.shape-separator {
position: relative;
height: 48px;
background: #333;
}
.shape-separator::after {
content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
position: absolute;
width: 100%;
height: 24px;
bottom: 0;
}
Description
- position: relative A Cartesian positioning context is established on the element for the pseudo element.
- ::after Define pseudo elements.
- background-image: url(...) Add a SVG shape (24 x 24 in the base64 format) to the background image of the pseudo-element, which is repeated by default. It must be the same color as the block to be separated.
- position: absolute Takes a pseudo-element from the document stream and positions it relative to the parent element.
- width: 100% Make sure the element stretches the entire width of its parent element.
- height: 24px Same height as shape.
- bottom: 0 Position the pseudo-element at the bottom of the parent element.
Post your comments / questions
Recent Article
- How to get domain name information from a Domain using Python
- ModulenotFoundError: no module named 'debug_toolbar' -SOLUTION
- How to create superuser in django project hosted in cPanel without terminal
- CSS & images not loading in django admin | cpanel without terminal
- Could not build wheels for mysqlclient, which is required to install pyproject.toml-based projects
- How to sell domain name on Godaddy (2023)
- TemplateSyntaxError at / Could not parse the remainder: ' + 1' from 'forloop.counter0 + 1'
- urllib3 v2.0 only supports OpenSSL 1.1.1+, currently the 'ssl' module is compiled with 'OpenSSL 1.0
Related Article