CSS 夹 Angular ？

Question

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

应该在移动设备上使用，因此 CSS3 完全可用。想不出一个简单的方法。图片是没有问题的。

它必须是这样的 block 状并且里面应该有一个文本(这是一个 block 状的 8 位按钮)

Answer 1

这跳出了 feela 的开端，但它的不同足以保证它有自己的答案。

1. 它不是在上面放置一个彩色 block ，而是只添加红色元素，让背景显示出来。但是，为了正确计算它(以便它们是方 Angular !)，我必须设置一个固定的 width 高度。可能有某种古怪的方法可以用百分比来做到这一点，但对于概念证明来说，考虑起来太让人头疼了。由于要求是固定高度可变宽度，这应该可行。

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/