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

​

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