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

#javascript #css #wordpress #div #clip_path

        
             
                
                    
                        
                            This question already has an answer here:
                            
                        
                    
                
                        
                            Как нарисовать через css clip-path (или другим способом)
ровную дугу внутрь блока?
                                
                                    (1 ответ)
                                
                        
                                Закрыт 1 год назад.
            
                    
Как создать блок дугой (внутрь блока) (потратил 5 часов на решение задачи и не нашел
ответа).

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

Пример 


    

Ответы

Ответ 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);
}



Ответ 2

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






Ответ 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);
}

  
  






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