Каким образом на Css можно реализовать фигуру, которая изображена снизу на картинке.
Отличие этих способов в том что:
1) clip-path__ вырезает в нужном объекте ту форму которую описали
2) pattern__ заливает нужные объекты нужным фоном
3) path__ это дословно просто замкнутый путь который имеет M....z
SVG path__
<svg width="100" height="100">
<path d="M0,100 100,100 80,80 20,80 20,20 0,0z" />
</svg>
Мне не давно приходилось делать эту штуку и потому внизу два ответа svg pattern и svg clip path
SVG pattern__
<svg viewBox="0 0 900 900" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="pt" width="490" height="490" patternUnits="userSpaceOnUse">
<image x="5" y="5"
width="490"
height="490"
preserveAspectRatio="none"
xlink:href="https://i.stack.imgur.com/ogqRQ.jpg"/>
</pattern>
</defs>
<path d="M300,10 490,10 490,200 450,160 450,50 380,50z" fill="red" />
<g fill="url(#pt)">
<path d="M10,490 190,490 150,450 50,450 50,350 10,300z"/>
<path d="M60, 440 490,440 490,210 440,160 440,60 380,60 280,10 60,10" />
</g>
</svg>
SVG clip-path__
<svg viewbox="0 0 900 900"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="cp">
<path d="M10,490 190,490 150,450 50,450 50,350 10,300z"/>
<path d="M60, 440 490,440 490,210 440,160 440,60 380,60 280,10 60,10" />
</clipPath>
</defs>
<image x="5" y="5"
width="490"
height="490"
clip-path="url(#cp)"
preserveAspectRatio="none"
xlink:href="https://i.stack.imgur.com/ogqRQ.jpg"/>
<path d="M300,10 490,10 490,200 450,160 450,50 380,50z" fill="red" />
</svg>
Можно просто бордерами это сделать:
.object{
width: 50px;
height: 50px;
border-left: 60px solid #000;
border-bottom: 60px solid #000;
border-right: 40px solid #fff;
border-top: 50px solid #fff;
}
<div class="object"></div>
Вариант с clip-path
:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 4vw;
height: 4vw;
border: 2vw solid red;
clip-path: polygon(0 0, 0% 100%, 100% 100%);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
<div></div>
Вариант с псевдоэлементами:
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
position: relative;
width: 4vw;
height: 4vw;
margin: 2vw;
}
div::before {
content: '';
position: absolute;
top: -2vw;
right: -2vw;
bottom: -2vw;
left: -2vw;
border: 2vw solid red;
}
div::after {
content: '';
position: absolute;
top: -2vw;
left: -2vw;
width: 300%;
height: 300%;
transform: rotate(-45deg);
transform-origin: 0 0;
background: #fff;
}
<div></div>
Я объединил два объекта и вот что получилось:
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
.main{
margin-top: 5%;
margin-left: 10%;
}
.object-1{
position:absolute;
border-bottom: 2vw solid red;
border-right: 2vw solid transparent;
width: 6vw;
margin-top: 2%;
margin-left: 2%;
}
.object-2{
position:absolute;
transform: rotate(90deg);
border-bottom: 2vw solid red;
border-left: 2vw solid transparent;
width: 6vw;
}
<div class="main">
<div class="object-1"> </div>
<div class="object-2"></div>
</div>
А хотелось бы реализовать эту фигуру при помощи одного объекта.
Но как это сделать?
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Если проект разбит на множество файлов, описывающих разных наследников некоторого абстрактного класса, то в файле, в котором нужно использовать...
Насколько я знаю cin оставляет символ '\n' в потоке из-за чего последующие вызовы cinget() и cin