Вставлять картинкой не хочется. Как лучше сделать его на css?
4 ответа
А вам кроссбраузерно или как?)
Можете использовать clip-path ( очень нравится эта штука )
Вот генератор
Можете поиграться с rotate ( но кода будет побольше )
body {
background: #fff;
}
.wrap {
position: relative;
width: 250px;
height: 190px;
top: 150px;
margin: auto;
overflow: hidden;
}
.wrap:before,
.wrap:after {
transform-origin: center center;
}
.wrap:before {
content: " ";
position: absolute;
width: 150%;
height: 50px;
top: -10px;
left: -10px;
background: #fff;
transform: rotate(9deg)
}
.wrap:after {
content: " ";
position: absolute;
width: 150%;
height: 70px;
bottom: -25px;
left: -10px;
background: #fff;
transform: rotate(3deg)
}
.block {
width: 100%;
height: 100%;
background: #333;
}
<div class='wrap'>
<div class='block'></div>
</div>
clip-path посоветовали, а т.к. всё это шаманство родом из svg, несколько кликов в векторном редакторе и навскидку
#rect1,
#rect2,
#rect3,
#rect4 {
position: relative;
width: 97vw;
height: calc(97vw * 0.5);
margin-top: 10%;
}
#rect1:before,
#rect3:before {
position: absolute;
display: block;
content: "";
top: 0;
left: 0;
width: 100%;
}
#rect1:before {
background-color: black;
transform: matrix(0.9901338, 0.14012513, 0, 1, 0, 0);
height: 75%;
}
#rect3:before {
background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDYyMiAzMDEiPgogIDxnIGlkPSJwYXJsIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTcuNzg2IC0zNTkuMDQpIj4KICAgIDxwYXRoIGQ9Im01Ny43ODYgMzU5LjA0IDYyMi4yMyA5NS43MyAwLjQ0IDIwNS44MS02MjIuMjItNDcuMDJ6IiBmaWxsPSIjMDAwIi8+CiAgPC9nPgo8L3N2Zz4=") no-repeat scroll 0% 0% / 100% auto;
height: 100%;
}
#canvas {
width: 100%;
}
<p>1. <b>css transform</b> - противополжные стороны равны</p>
<div id="rect1"></div>
<p>2. <b>inline svg</b> - один из вариантов использования</p>
<div id="rect2">
<svg viewBox="0 0 622 301">
<use xlink:href="#prl"></use>
</svg>
</div>
<p>2. <b>css base64 background</b> - <a href="http://www.mobilefish.com/services/base64/base64.php">кодирование svg</a>
</p>
<div id="rect3"></div>
<p>4. <b>canvas</b>
</p>
<div id="rect4">
<canvas id='canvas' width='622' height='301'></canvas>
</div>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
// #layer1
ctx.save();
ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -57.785973, -359.036760);
// #path4155
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.lineCap = 'butt';
ctx.lineWidth = 1.000000;
ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.moveTo(57.785973, 359.036760);
ctx.lineTo(680.021990, 454.765370);
ctx.lineTo(680.457100, 660.581900);
ctx.lineTo(58.244903, 613.558210);
ctx.fill();
ctx.restore();
</script>
<!-- исходник svg -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0" viewBox="0 0 622 301" style="position:fixed;">
<g id="prl" transform="translate(-57.786 -359.04)">
<path d="m57.786 359.04 622.23 95.73 0.44 205.81-622.22-47.02z" fill="#000" />
</g>
</svg>
К предложенным выше, добавлю вариант с помощью border. На мой вкус, самый простой)
Фигуры на CSS: https://habrahabr.ru/post/126207/
.block {
width: 250px;
height: 150px;
}
.wrap {
width:500px;
background-color: grey;
position: relative;
background-color: #333;
margin: 60px;
}
/* верхний скос */
.wrap::before {
content: "";
position: absolute;
display: block;
border-top: 45px solid transparent;
border-left: 500px solid #333;
top: -45px;
}
/* нижний скос */
.wrap::after {
content: "";
position: absolute;
display: block;
border-bottom: 15px solid transparent;
border-right: 500px solid #333;
bottom: -15px;
}
<div class="wrap">
<div class="block"></div>
</div>
html {
height: 400px;
background:
linear-gradient(10deg, transparent 0, transparent 35%, silver 35%, silver 65%, transparent 65%, transparent 100%),
linear-gradient( 5deg, transparent 0, transparent 25%, silver 25%, silver 55%, transparent 55%, transparent 100%),
white;
}