Как создать блок дугой? (с картинкой - примером)

200

17 марта 2018, 19:29

Как создать блок дугой (внутрь блока) (потратил 5 часов на решение задачи и не нашел ответа).

Пользуюсь WordPress/css.

Пример

Answer 1

Как один из вариантов:

div { 
  margin: 50px; 
  width: 100px; 
  height: 50px; 
  border: 2px solid red; 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
  border-bottom: 0; 
  transform: rotate(30deg); 
}

<div></div>

Answer 2

Это можно сделать на SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" width="230" height="150" viewBox="0 50 230 150" style="border: 1px solid crimson"> 
  <path style="fill:none;stroke:crimson;stroke-width:3;" d="M 50,131 C 91,86 161,108 165,163"/> 
  <polygon points="47 125, 57 135, 47 135" fill="crimson"/> 
</svg>

Answer 3

Самое первое что нужно это некий блок который перекроет изображение, для этого воспользуемся приблудой из css3 border-radius:16em/1em; смотрим сниппет

img { 
  display: block; 
  max-width: 100%; 
  max-height: 100%; 
} 
 
.img { 
  width: 640px; 
  margin: 50px auto; 
  position: relative; 
} 
 
.img:after { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: #fff; 
  border-radius: 16em/1em; 
  position: absolute; 
  bottom: -25px; 
} 
 
.img:before { 
  content: ""; 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: #fff; 
  border-radius: 16em/1em; 
  position: absolute; 
  top: -25px; 
} 
 
.bullet { 
  margin: 50px; 
  width: 100px; 
  height: 50px; 
  border: 2px solid red; 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
  border-bottom: 0; 
  transform: rotate(30deg); 
  position: absolute; 
  top: 30px; 
  left: 50%; 
} 
 
.bullet:before { 
  content: ""; 
  border-left: 10px solid transparent; 
  border-right: 10px solid red; 
  border-top: 10px solid transparent; 
  border-bottom: 10px solid transparent; 
  position: absolute; 
  left: -12px; 
  top: 50px; 
  transform: rotate(-80deg); 
}

<div class="img"> 
  <img src="https://get.wallhere.com/photo/women-model-sitting-black-hair-fashion-hair-Person-swimwear-clothing-supermodel-girl-beauty-woman-lady-leg-1920x1200-px-human-positions-photo-shoot-art-model-abdomen-human-body-thigh-undergarment-590671.jpg" alt=""> 
  <div class="bullet"></div> 
</div>