CSS:带有十字标签和水平标签的div
问题描述:
我在看帖子here,注意到快照有一个侧面标签栏和一个用于标记内容的botton水平栏。CSS:带有十字标签和水平标签的div
这怎么能用CSS实现?
更新:我说的是第一个图像中的“快照”和“WP高级代码编辑器”中的交叉栏!
答
试试这个 - http://jsfiddle.net/hEeZA/
HTML
<div class="container">
<span class="diag"> Some text </span>
<span class="horiz"> Some text </span>
</div>
CSS
div {
height: 300px;
width: 400px;
background: beige;
overflow: hidden;
position: relative;
}
span {
width: 200px;
display: inline-block;
height: 30px;
line-height: 30px;
color: #fff;
background: orange;
text-align: center;
position: absolute;
}
.horiz {
bottom: 40px;
}
.diag {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
right: -50px;
top: 30px
}
+0
如何将右上栏放到左侧? – jagamot 2012-07-20 18:32:49
+1
http://jsfiddle.net/hEeZA/2/ – 2012-07-20 18:51:16
答
我的演示可以在这里看到http://dabblet.com/gist/3152262
我有overflow:hidden
图像包装,我已经只是使用了:before
我旋转并绝对定位的伪元素。水平的想法也一样。
HTML
<a href="#" class="img-wrapper">
<img src="img.jpg">
</a>
CSS
.img-wrapper {
width: 400px;
height: 300px;
box-shadow: 1px 1px 3px #000;
display: block;
overflow: hidden;
position: relative;
}
.img-wrapper:before, .img-wrapper:after {
padding: .3em 2.9em;
position: absolute;
background: blue;
color: white;
font: 700 14px sans-serif;
}
.img-wrapper:before {
top: 35px;
right: -40px;
transform: rotate(45deg);
content: 'Screenshot';
}
.img-wrapper:after {
top: 85%;
content: 'Developer Formatter'
}
你说的是什么吧? – sachleen 2012-07-20 17:34:40
单杠很容易使用绝对位置的div,但右上角很棘手,您必须使用CSS3转换和css3的许多其他功能。 – SVS 2012-07-20 17:35:01
@SVS - 您可以将我指向任何资源吗? – jagamot 2012-07-20 17:37:31