Как сверстать такой фон для body на css? И вообще возможно ли? Спасибо!
2 ответа
Если потребуются поянения спрашивайте
body {
margin: 0;
}
svg {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: -10000;
}
.background path {
fill: lightblue;
}
.content {
width: 600px;
margin: auto;
}
.content p {
margin: 30px auto;
font-size: 20px;
font-family: sans-serif;
}
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deleniti inventore animi in dolorum praesentium ducimus magnam? Magni, est incidunt iste reiciendis eos ipsam non itaque dolore quod commodi delectus.</p>
<p>Corporis nisi tempore vitae similique? Dolor nam praesentium nisi. Totam illum odit quod atque, non consectetur suscipit numquam fuga voluptatum possimus! Itaque at quaerat quibusdam ullam modi magnam eius quos.</p>
<p>Quidem nostrum non recusandae facere ducimus voluptatum esse nisi. Dignissimos recusandae nam voluptates minus eos perspiciatis, cupiditate tempore ea placeat qui ipsa hic! Eligendi, ex quis. Facilis magni commodi est!</p>
<p>Cumque, excepturi. Beatae inventore perspiciatis ratione temporibus ipsa quae aspernatur dicta ipsam magni commodi, necessitatibus adipisci animi. Rem ipsa eum minus inventore unde, fugit corrupti officiis beatae voluptate vitae facere!</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deleniti inventore animi in dolorum praesentium ducimus magnam? Magni, est incidunt iste reiciendis eos ipsam non itaque dolore quod commodi delectus.</p>
<p>Corporis nisi tempore vitae similique? Dolor nam praesentium nisi. Totam illum odit quod atque, non consectetur suscipit numquam fuga voluptatum possimus! Itaque at quaerat quibusdam ullam modi magnam eius quos.</p>
<p>Quidem nostrum non recusandae facere ducimus voluptatum esse nisi. Dignissimos recusandae nam voluptates minus eos perspiciatis, cupiditate tempore ea placeat qui ipsa hic! Eligendi, ex quis. Facilis magni commodi est!</p>
<p>Cumque, excepturi. Beatae inventore perspiciatis ratione temporibus ipsa quae aspernatur dicta ipsam magni commodi, necessitatibus adipisci animi. Rem ipsa eum minus inventore unde, fugit corrupti officiis beatae voluptate vitae facere!</p>
</div>
<svg viewBox="0 0 10 1" class="background">
<path d="M0,0 0,1 0.18,1"/>
<path d="M0,0 0.24,1 0.6,1"/>
<path d="M0,0 0.75,1 1.2,1"/>
<path d="M0,0 1.3,1 2,1"/>
<path d="M0,0 2.3,1 3.2,1"/>
<path d="M0,0 3.5,1 6.5,1"/>
<path d="M0,0 9,1 17,1"/>
</svg>
-
@Sevastopol' на svg можно сделать всё, убрать или изменить дело 3х минут 10 мар 2020 в 10:35
* {
margin: 0;
padding: 0;
}
body:before {
z-index: -1;
content: "";
display: block;
position: fixed;
top: 1px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
background-color: lightblue;
background-image: -webkit-repeating-radial-gradient(center center, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 80%);
background-image: repeating-radial-gradient(center center, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 1px, transparent 1px, transparent 80%);
-webkit-background-size: 3px 3px;
background-size: 3px 3px;
clip-path: polygon( 40% 0%, 100% 0%, 100% 10%, 40% 0%, 22% 0%, 100% 20%, 100% 50%, 12% 0%, 9% 0%, 100% 80%, 100% 100%, 80% 100%, 7% 0%, 5% 0%, 50% 100%, 20% 100%, 3% 0%, 1% 0%, 10% 100%, 0% 100%, 0% 0%);
}
-
А clip-path чуть чуть не кроссбраузерный а avg даже в ie8 поддерживается 10 мар 2020 в 10:36
transform: rotate();
transform3d