Форма CSS с кривой вставки и прозрачным фоном

Мне нужно создать фигуру CSS, подобную этой картинке.

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

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

#shape {     
    border-left: 70px solid transparent;
    border-top: 100px solid red;
    height: 0;
    width: 200px;
}

Может кто-нибудь помочь мне?


svg html css css-shapes
person Sameer Sam    schedule 11.07.2014    source источник
comment
Белая часть должна быть прозрачной или подойдет цвет?   -  person Nico O    schedule 11.07.2014
comment
Этот URL-адрес очень помог мне некоторое время назад, чтобы узнать и понять, как вы можете играть с псевдоэлементами, чтобы создавать множество форм различий. Я рекомендую вам проверить это: css-tricks.com/examples/ShapesOfCSS   -  person Alvaro Menéndez    schedule 11.07.2014
comment
белая часть должна быть прозрачной @NicoO   -  person Sameer Sam    schedule 11.07.2014
comment
@AlvaroMenéndez Спасибо за URL.   -  person Sameer Sam    schedule 11.07.2014

Ответы (2)


arrow_upward
8
arrow_downward

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

Выход :

Форма CSS с прозрачной кривой вставки

#shape {
  width: 300px; height: 100px;
  position: relative;
  overflow: hidden;
}

#shape:before {
  content: '';
  position: absolute;
  top: 10%; right: 0;
  width: 300%;
  padding-bottom: 300%;
  border-radius: 100%;
  background: none;
  box-shadow: 10px -10px 5px 300px #F15723;
  z-index: -1;
}

body{background:url(https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg);background-size:cover;}
<div id="shape"></div>

демонстрация

person web-tiki    schedule 11.07.2014
comment
Эй, я добавил на страницу, но возникла проблема, вы используете белый цвет, но мне нужно добавить его над разделом, поэтому кривая должна быть прозрачной. Можете ли вы сказать мне, как это сделать? - person Sameer Sam; 11.07.2014
comment
Извините, нужно спросить еще кое-что :( Мне нужно добавить текст внутри этого div. Как это сделать? Когда я добавляю, он не отображается. - person Sameer Sam; 11.07.2014
comment
Используйте свойство z-index для отображения псевдоэлемента за содержимым вашего div: jsfiddle.net/webtiki/38GJA/ 5 - person web-tiki; 11.07.2014
comment
Я получил эту работу, сделав позиции тегов привязки абс.. можете ли вы проверить stackoverflow.com/questions/24699139/ Можете ли вы сказать мне, что не так? Надеюсь, вы сможете это исправить.. :) - person Sameer Sam; 11.07.2014

arrow_upward
0
arrow_downward

Вариант №01:

CSS3 linear-gradient() также может рисовать этот фон:

CSS:

div {
  background: linear-gradient(45deg, transparent 50px, tomato 50px);
}

Выходное изображение:

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

body {
  background: linear-gradient(lightgreen, green);
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(45deg, transparent 50px, tomato 50px);
  height: 150px;
  margin: 20px;
  width: 400px;
}
<div>
  
</div>

Вариант №02:

Мы можем использовать псевдоэлементы :before и :after и использовать преобразование css3, чтобы сделать эту фигуру со скругленными углами.

Выходное изображение со скругленными углами

body {
  background: linear-gradient(lightgreen, green);
  min-height: 100vh;
  margin: 0;
}
div {
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  height: 150px;
  margin: 20px;
  width: 400px;
}
div:before {
  border-radius: 0 0 10px 10px;
  transform-origin: 100% 0;
  transform: skewY(45deg);
  background: tomato;
  position: absolute;
  width: 45px;
  z-index: -1;
  content: '';
  bottom: -5px;
  left: 0;
  top: 0;
}
div:after {
  border-radius: 0 10px 10px 10px;
  background: tomato;
  position: absolute;
  content: '';
  left: 35px;
  bottom: 0;
  right: 0;
  top: 0;
}
<div>

</div>

person Mohammad Usman    schedule 26.12.2016
comment
Я думаю, что вы, должно быть, пропустили это утверждение в вопросе, но я не могу дать ему кривую.. Ваш ответ не дает кривой. - person Harry; 30.12.2016
comment
@ Гарри, да, ты прав. Я постараюсь обновить свой ответ или удалить его, если не смогу. - person Mohammad Usman; 30.12.2016
comment
Все еще не уверен, что это то, за чем ОП охотился. Я думаю, они хотели, чтобы сам разрез был изогнутым, но скриншот выглядит иначе. В любом случае, я оставлю это здесь, и, возможно, ОП ответит :) - person Harry; 30.12.2016
comment
@Harry Хорошо, я обновлю свой ответ, если ОП пояснит требуемое поведение. - person Mohammad Usman; 30.12.2016