Уголки клипов CSS?

Question

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

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

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

Answer 1

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

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; 
} 

Fiddle: http://jsfiddle.net/3R9c5/2/

Answer 2

атрибутом CSS граница радиуса

Answer 3

возможно this поможет. Или вы можете просто добавить новый класс, «кадры», например

.cadre 
{ 
border-radius: 10px; 
} 

в файл CSS, то повлиять на него в дела.

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

Вы можете вставить каждый из этого четыре блочные -корни, добавляя псевдоэлементы через ::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 6

Как насчет this?

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;} 

Edit: обновлено после последнего проникновения в требования вопроса.