Реализация фигуры на Css

154

11 марта 2021, 02:20

Каким образом на Css можно реализовать фигуру, которая изображена снизу на картинке.

Answer 1

Отличие этих способов в том что:

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>

Answer 2

Можно просто бордерами это сделать:

.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>

Answer 3

Вариант с 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>

Answer 4

Я объединил два объекта и вот что получилось:

* {   
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>

А хотелось бы реализовать эту фигуру при помощи одного объекта.

Но как это сделать?

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Стоит ли создавать header с include-ами?

Если проект разбит на множество файлов, описывающих разных наследников некоторого абстрактного класса, то в файле, в котором нужно использовать...

137

c++

Почему после использования cin функции cin.get() и cin.getline() не работают, а последующие вызовы cin срабатывают?

Насколько я знаю cin оставляет символ '\n' в потоке из-за чего последующие вызовы cinget() и cin

127

c++

Почему нет выхода за пределы массива [дубликат]

Задание из экзамена:

HTML

Не подгружается СSS на мобильной версии?)

116