有没有一种简单的方法来设计这样的元素?
应该在移动设备上使用,所以完全可以使用CSS3。我想不出一个简单的方法。图片是不可行的。
必须是这个块状的,并且应该有一个文本 (这是一个块状的8位按钮)。
应该在移动设备上使用,所以完全可以使用CSS3。我想不出一个简单的方法。图片是不可行的。
必须是这个块状的,并且应该有一个文本 (这是一个块状的8位按钮)。
相较于使用有色块覆盖,这里只增加了红色元素,使背景透过显示。但是,为了正确计算它们的角落(以便它们是正方形),我必须设置一个固定的高度。可能有一些使用百分比的诡异方法,但为了证明概念,考虑这种方法会让人头疼。由于要求是固定高度和可变宽度,这个方法应该有效。
伪元素需要有内容,否则它们将“折叠”。内容可以为空,但该属性需要被设置。
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/
<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;}
编辑:根据对问题需求的最新了解进行更新。
::before
或::after
来插入这四个角落中的每一个。.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 */
/* … */
我认为 border-radius
无法实现这个效果。以下是我能想到的最简单的方法:
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的border-radius属性