0

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

4 ответа 4

4

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

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

4

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

1

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

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

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

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

1
0

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

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>

7
  • А в чём отличие SVG pattern от SVG clip-path? 30 июн 2019 в 22:25
  • @Black_Viper обновил ответ 30 июн 2019 в 22:48
  • Благодарю за столь развернутый ответ) Пока я не понимаю эту сложную технологию. Так как первый раз вижу "svg pattern и clip-path" Если вам не трудно, то не могли бы вы пожалуйста дать ссылку на учебник по которому вы осваивали данную технологию. 30 июн 2019 в 22:54
  • 1
    svg-art.ru Alexandr_TT Это автор этого сайта 30 июн 2019 в 23:11
  • 1
    Премного благодарен. Очень информативный сайт))) 2 июл 2019 в 21:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.