Как создать форму мульфильм в CSS?

-7

У меня есть запрос клиента, чтобы создать перевернутую форму мульгилл под заголовком на их веб-сайте.Как создать форму мульфильм в CSS?

См. Ниже. И я знаю, о чем вы думаете: «Данг, ваши навыки рисования - эпические, пожалуйста, научите меня». Мой ответ на это будет «эти навыки не могут преподаваться».

Я пробовал несколько вещей, чтобы попытаться заставить это работать, и не увенчались успехом.

источник

2016-04-06 Tony D.

Dang, проверьте это сглаживание! На другой несвязанной теме вы могли бы предоставить нам какой-либо код, который вы должны предпринять таким образом? Это определенно поможет нам помочь вам. – chazsolo

Что вы пробовали до сих пор точно? Что не сработало? Добавление фонового изображения?! – Pierre

Прежде чем задавать вопросы, сначала прочтите необходимые материалы. Покажите, что вы пробовали, как уже упоминалось в @Pierre. Что вам нужно, это маскировка CSS. В Интернете есть множество учебных пособий, например: http://www.html5rocks.com/en/tutorials/masking/adobe/. После попытки и все еще неудачно, покажите как ваш код. После этого люди помогут! –

Как Paulie_D упоминалось, что делает эту форму с inline SVG тривиальна. В следующем примере, я использовал элемент пути с 2 bezier curve commands:

svg{ 
 
    display:block; 
 
    width:30%; 
 
    margin:0 auto; 
 
}

<svg viewbox="0 0 10 5"> 
 
    <path fill="#FF7F27" d="M10 0 C7.5 0 7.5 5 5 5 S2.5 0 0 0z" /> 
 
</svg>

На стороне записки, вы можете увидеть здесь, как выравнивание двойных кривых в CSS хлопот по сравнению с SVG: CSS - Double curved shape.

источник

2016-04-06 15:30:09

ответ

Смежные вопросы