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

编辑：最新分析上市公司问题的需求后更新。