Question

是否有一种简单的方式来设置这样的元素？

Example

假设在移动设备上使用，因此CSS3完全可用。想不出一个简单的方法。图像是不可能的。

它必须是这个块，并且应该有一个文本（这是一个块状的8位按钮）

Answer 1

这与费拉的开始有所不同，但它的不同足以保证自己的答案。

它不是过度放置彩色块，而是添加红色元素，允许背景显示。但是，要正确计算它（以便它们是方角！）我必须设置一个固定的 ~~width~~ 高度。用百分比来做这个可能有某种古怪的方法，但是为了概念证明，它太令人头疼了。由于要求是固定高度可变宽度，这应该有效。
伪元素需要有内容，否则它们会“崩溃”。内容可以为空，但需要设置该属性。

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

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

编辑：在对问题要求的最新见解后更新。

Answer 3

您可以通过::before或::after附加伪元素来插入这四个块角中的每一个。

e.g：

.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

CSS border-radius属性

Answer 5

也许this会帮助你。或者你可以添加新的类，例如“cadre”

.cadre
{
 border-radius: 10px;
}

到您的css文件，然后将其影响到div。

Answer 6

我认为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>

CSS剪辑角落？

6 个答案: