CSS-уголки?

Question

Есть ли простой способ стилизовать элемент, подобный этому?

Предполагается использовать на мобильном телефоне, чтобы CSS3 был полностью доступен.Не могу придумать простой способ.Изображения не подлежат обсуждению.

Это должен быть этот блок и должен быть текст внутри (это блочная 8-битная кнопка)

Answer 1

Это прыгает от начала feeela, но это достаточно отличается, чтобы гарантировать свой собственный ответ.

1. Вместо чрезмерного наложения цветного блока он добавляет только красные элементы, позволяя фону просвечивать. ОДНАКО, чтобы правильно рассчитать (чтобы они были квадратными углами!) Мне пришлось установить фиксированную ширину высоту. Вероятно, есть какой-то дурацкий способ сделать это с процентами, но для доказательства концепции это было слишком сложно для размышлений. Так как требование для фиксированной высоты переменной ширины, это должно работать.

2. Псевдоэлементы должны иметь содержимое, иначе они будут «разрушаться». Содержимое может быть пустым, но это свойство необходимо установить.

CSS:

/* main button block */
.button {
    display:inline-block;
    background: #f00;
    position: relative;
    line-height: 60px;
    text-align: center;
    padding: 0 20px;
    height: 60px;
    margin-left: 0.5em;
}

/* common background color to all */
.button, .button::before, .button::after {
    background-color: #f00;
}

/* shared styles to make left and right lines */
.button::before, .button::after {
    content: "";
    position: absolute;
    height: 50px;
    width: 5px;
    top: 5px;

}

/* pull the left 'line' out to the left */
.button::before {
    left: -5px;
}

/* pull the right 'line' out to the right */
.button::after {    
    right: -5px;
}

1018 *

Скрипка: http://jsfiddle.net/3R9c5/2/

Answer 2

Как насчет этого ?

HTML:

<div class="block">(text goes here)</div>

CSS:

body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
   position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
   position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
   position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}

Изменить: обновлено после последних сведений отребования вопроса.

Answer 3

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

например:

.button {
    background: #f00;
    position: relative;
}

/* corner top left */
.button::after {
    position: absolute;
    top: 0; left: 0;
    width: 5px; height: 5px;
    background: #00f;
}

/* corner top right */
.button::after {
    position: absolute;
    top: 0; right: 0;
    width: 5px; height: 5px;
    background: #00f;
}

/* corner bottom left */
/* … */

Answer 4

Я не думаю, что border-radius может это сделать.Это самый простой способ, о котором я могу думать:

http://jsfiddle.net/DpLdt/

CSS:

body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}

HTML:

<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>​

Answer 5

возможно это поможет вам. Или вы можете просто добавить новый класс, "cadre", например

.cadre
{
 border-radius: 10px;
}

к вашему CSS-файлу, затем примените его к div.

Answer 6

CSS-атрибут border-radius