CSS剪輯角落？

Question

有沒有一種簡單的方法來設計這樣的元素？

應該是在移動中使用，以便CSS3是完全可用。想不到一個簡單的方法。圖像沒有問題。

它必須是這個塊狀並有應該是內部的文本（這是一種塊狀的8位按鈕）

Answer 1

這從feeela的開始就跳了出來，但它不同於自己的答案。

1. 而不是把一個彩色塊overly，它只增加了紅色的元素，允許背景顯示。但是，要正確計算它（以便它們是方形的角落！）我必須設置一個固定的高度爲 寬度 高度。可能有某種古怪的方式來用百分比來做到這一點，但對於概念證明來說，想想它太令人頭疼。由於要求是固定高度可變寬度，所以這應該起作用。

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

小提琴：http://jsfiddle.net/3R9c5/2/

Answer 2

的CSS邊界半徑屬性

Answer 3

也許this會幫助你。或者你可以添加新的類，例如「幹部」

.cadre 
{ 
border-radius: 10px; 
} 

你的css文件，然後影響到div。

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或0123添加僞元素。

例如爲：

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

編輯：最新分析上市公司問題的需求後更新。