Я хочу изогнутый div, как это изображение я разместил

Question

Я хочу изогнутый div, как это изображение я разместил

0

На этом изображении панель навигации находится в полукруге с изогнутым div. Как я могу воссоздать этот эффект? Я хочу, чтобы код создавал его, требуется ли CSS или Javascript.

Я попробовал это:

body {
    background-color:#900;
    margin:0;
}
#first {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(8deg);
    float:left;
}

#middle {
    width:20%;
    height:250px;
    background-image:url(file:///E|/bollywoodGrill/website3/images/logo.jpg);
    float:left;
}

#second {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(175deg);
    float:left;
    margin-top:10px;
}

С помощью этого HTML:

<div id="first"></div>
<div id="middle"></div>
<div id="second"></div>

http://jsfiddle.net/CzePX/

Как я могу сделать этот взгляд округленным?

Shikhil Bhalla 12 май 2014, в 09:04

Источник

0

попробуйте использовать радиус границы
user3608397 12 май 2014, в 06:16
0

@abhitalks я только что попробовал преобразовать rotate.но это не дает правильную позицию
Shikhil Bhalla 12 май 2014, в 06:19
0

@user3608397 user3608397 радиус границы предназначен для придания кривых только углам
Shikhil Bhalla 12 май 2014, в 06:20
0

Было бы лучше, если бы вы могли опубликовать свой код. Это будет сигнализировать другим, что вы пытались, и, следовательно, постараюсь помочь вам.
Abhitalks 12 май 2014, в 06:20
0

@abhitalks я редактирую вопрос тем, что пытался
Shikhil Bhalla 12 май 2014, в 06:31
1

Это даст вам старт: jsfiddle.net/abhitalks/x4w37/1
Abhitalks 12 май 2014, в 07:14
0

Чтобы эта кривая выглядела правильно с помощью CSS, не стоит проблем. Вам лучше использовать фоновое изображение и накладывать элементы меню с небольшим поворотом: повернуть (-10 градусов). Подробнее о ротации здесь: css-tricks.com/snippets/css/text-rotation
Damien 15 май 2014, в 21:37

Показать ещё 5 комментариев

Теги:

jquery

html5

css3

web

photoshop

1 ответ

Ещё вопросы

попробуйте использовать радиус границы
@abhitalks я только что попробовал преобразовать rotate.но это не дает правильную позицию
@user3608397 user3608397 радиус границы предназначен для придания кривых только углам
Было бы лучше, если бы вы могли опубликовать свой код. Это будет сигнализировать другим, что вы пытались, и, следовательно, постараюсь помочь вам.
@abhitalks я редактирую вопрос тем, что пытался
Это даст вам старт: jsfiddle.net/abhitalks/x4w37/1
Чтобы эта кривая выглядела правильно с помощью CSS, не стоит проблем. Вам лучше использовать фоновое изображение и накладывать элементы меню с небольшим поворотом: повернуть (-10 градусов). Подробнее о ротации здесь: css-tricks.com/snippets/css/text-rotation

Stephan Wagner · Accepted Answer · 2014-05-12T06-08-00.000Z

С помощью только CSS или JavaScript вам будет сложно создать что-то близкое к дизайну на изображении. Это, безусловно, дизайн фотошопа, и он также должен выглядеть как дизайн фотошопа. Если вы хотите как можно ближе подойти к полукругу на картинке, вот скрипка: http://jsfiddle.net/2QwmW/

<div class="container">
    <div class="circle"></div>
</div>

.container {
    width: 800px;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #ab632a;
}

.circle {
    position: absolute;
    z-index: 1;
    width: 2000px;
    height: 2000px;
    border: 50px solid rgba(80, 0, 0, .5);
    left: 50%;
    margin-left: -1050px;
    top: -1950px;
    border-radius: 50%;
}

.container:before,
.container:after {
    content: '';
    width: 100px;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
}

.container:before {
    left: 0;
    background-image: linear-gradient(to right, #ab632a, rgba(170, 98, 43, 0));
}

.container:after {
    right: 0;
    background-image: linear-gradient(to left, #ab632a, rgba(170, 98, 43, 0));
}

Но это только полукруг, повернутый текст может быть вставлен с абсолютными позициями и -webkit-transform: rotate (XXdeg);