Помогите создать HTML страницу с загнутым заголовком - PullRequest
Новая
       45

Помогите создать HTML страницу с загнутым заголовком

3 голосов
/ 24 января 2011

Мне было интересно, как лучше всего (используя html, css и графику) создать веб-страницу, верхняя часть заголовка которой выглядит скошенной, а не прямой?Пожалуйста, смотрите изображение ниже:

alt text

Я не уверен, как использовать изображения таким образом, чтобы они расширялись / сжимались в соответствии с различными размерами браузера /резолюции ...

Кто-нибудь может мне помочь?Или, может быть, указать мне на ресурс?

Спасибо!

Ответы [ 5 ]

4 голосов
/ 24 января 2011

Вы можете использовать border-radius.

Example

См. Мой пример на jsFiddle .

2 голосов
/ 24 января 2011

Моя более чистая версия @ Alex's:

Демо-версия 

.head {
    -webkit-border-top-left-radius: 40% 80px;
    -webkit-border-top-right-radius: 40% 80px;
    -moz-border-radius-topleft: 40% 80px;
    -moz-border-radius-topright: 40% 80px;
    border-top-left-radius: 40% 80px;
    border-top-right-radius: 40% 80px;

    background: blue;
    height: 280px
}
<div class="head"></div>

Очевидно, что он не будет работать в IE.

1 голос
/ 24 января 2011

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

0 голосов
/ 27 декабря 2016

Вот еще один способ достижения этого.

  1. Нарисуйте оверлей с псевдоэлементом на width и height больше, чем сам элемент.
  2. Применить border-radius для создания эффекта округления и background-color.
  3. Добавьте overflow: hidden в родительский элемент, чтобы скрыть лишнюю часть.

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

Output Image

body {
  background: linear-gradient(lightblue, blue);
  min-height: 100vh;
  margin: 0;
}

.box {
  position: relative;
  margin: 5vh auto;
  overflow: hidden;
  height: 90vh;
  width: 500px;
}

.box:before {
  border-radius: 100% 100% 0 0;
  position: absolute;
  background: white;
  bottom: -200px;
  right: -200px;
  left: -200px;
  content: '';
  top: 0;
}
<div class="box">
  
</div>
0 голосов
/ 24 января 2011

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

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

var STEPS = 53;
var FACTOR = 5;

var $el = $('div.header');
var width = $el.outerWidth();
var $span = $('<span></span>');
for(i=0;i<STEPS;i++){
    tmpWidth = stepWidth(i, width);
    $span.clone().css({
        'bottom': i + 'px',
        'width': tmpWidth,
        'left': (width - tmpWidth)/2
    }).appendTo($el);

}
function stepWidth(i, width){
    return -(1 / FACTOR * Math.pow(i, 2)) + width;
}

alt text

Вы можете найти весь код (html + css на Fiddle)

...