4

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

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

Пример

введите сюда описание изображения

Серега Он
  • 89

3 Answers3

4

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

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>
humster_spb
  • 13,511
  • 4
  • 24
  • 49
  • humster_spb,благодарю за ответ,как вариант очень хороший и в решении моей задачи он пригодиться как небольшая часть. – Серега Он Mar 16 '18 at 13:19
  • можешь скинуть инфу по поводу такого решения: border-radius: 50% 50% 0 0 / 100% 100% 0 0;? я такого не видел еще) – Виталик Черный Mar 16 '18 at 20:23
  • @ВиталикЧерный, вот тут, например: http://shpargalkablog.ru/2017/08/semicircle.html – humster_spb Mar 17 '18 at 05:55
  • @ВиталикЧерный, ещё про бордер-радиус и всякие фигуры тут есть: https://habrahabr.ru/post/141658/ – humster_spb Mar 17 '18 at 05:55
  • 1
    @СерегаОн, будьте добры, если вам помог чей-то ответ - отметьте его решением, таковы правила SO:) – Arthur Mar 25 '18 at 10:48
3

Это можно сделать на 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>
Arthur
  • 4,572
2

Самое первое что нужно это некий блок который перекроет изображение, для этого воспользуемся приблудой из 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>

и как видно я вставил изображение в блок который родитель для псевдо элементов, вот псевдо элмементами я задал скругление

  • 1
    Автор вопроса хотел узнать, как сделать дугу( красную стрелку), как мне кажется, хотя я тоже сомневался, то ли я сделал(вопрос некрасиво сформулирован) – Arthur Mar 16 '18 at 16:39
  • Я хотел на свг сделать но подумал что ещё потом объяснять надо...и сделал на css –  Mar 16 '18 at 16:44
  • Ну, не сказал бы:) Достаточно объяснить, как сделать path, а именно через Inkscape, и треугольник через polygon, а там уже координаты x y 3х поинтов(в моём случае конечно) – Arthur Mar 16 '18 at 16:46
  • если не по теме я ответил могу удалить ... –  Mar 16 '18 at 16:52
  • Можно ведь дополнить, сделать дугу на том, что у тебя есть и будет полноценный ответ)) – Arthur Mar 16 '18 at 17:01
  • дополнил....... –  Mar 16 '18 at 17:16
  • Хороший пример! – Arthur Mar 16 '18 at 17:18