如何用CSS实现这一点?请参阅附件图片。如何用CSS实现这个倾斜的div实现
-1
A
回答
1
有很多方法可以实现这一点;你可以简单地use a forward-slash as the content of a pseudo element。这会比使用转换/倾斜的选项更进一步。
<span>Item One</span><span>Item Two</span>
span:after {
content: "/";
font-size: 5em;
vertical-align: middle;
}
span:last-child:after {
content: none;
}
的另一种方法,如我在前面段落中提到的,是skew a pseudo element。
span::after {
content: "";
margin: 0 1em;
background: black;
display: inline-block;
vertical-align: middle;
transform: skewX(-20deg);
width: .5em; height: 5em;
}
span:last-child::after {
content: none;
}
需要注意的是与伪元素打交道时,请记住,Internet Explorer 8中支持他们,但只能与一个:
前缀是非常重要的。直到Internet Explorer 9,您才可以将它们与::
一起使用。
+1
这是一个非常有趣的方式来'视觉上'使用固定宽度和高度的':after'添加div并旋转它。我从你的回答中学到了很多东西! :) – 2014-09-12 17:16:46
0
你可以用一个div
给它的一边border
然后用-webkit-transform
到rotate
它。
<div class="background">
</div>
<div><label>Some Text Here</label></div>
<div id="dv">
<label>Some Different Text Here</label>
</div>
CSS
.background {
border-top: 3px solid #ccc;
padding: 0;
margin: 0;
height: 50px;
-webkit-transform: translateY(-20px)
translateX(5px)
rotate(330deg);
}
#dv
{
-webkit-transform: translateY(-30px) translateX(300px) rotate(-1deg);
}
这里的DEMO
相关问题
- 1. 如何实现倾斜的右边缘div?
- 2. 实现压花/倾斜/ 3D边境的CSS
- 3. 如何用log4php实现“对象倾销”?
- 4. 如何用CSS实现这种布局?
- 5. 如何用CSS实现这一点?
- 6. 如何用CSS实现这种布局?
- 7. 如何实现这样一个滚动div与改变CSS?
- 8. 如何在Windows Phone上实现倾斜效果?
- 9. 如何在mapview中实现3D /倾斜模式?
- 10. 是否可以用css实现斜边?
- 11. 如何实现这个FilteringIterator?
- 12. 实现这个用CSS和HTML
- 13. 这个类如何实现“__iter__”方法而不实现“next”?
- 14. 如何给这个倾斜的CSS丝带环绕看看?
- 15. 如何实现与CSS
- 16. 如何实现在CSS
- 17. CSS如何实现词云?
- 18. 实现使用CSS
- 19. 如何实现这个嵌套的linked_to_function?
- 20. 这个输出是如何实现的?
- 21. 这个动画是如何实现的
- 22. 用CSS倾斜的列
- 23. 这个搜索页面是如何实现的(javascript,css,jquery?)?
- 24. 这个CSS的缩放效果如何实现?
- 25. 如何在MongoDB中实现这个?
- 26. 如何实现这个结果
- 27. 如何实现这个逻辑流?
- 28. iOS:这个接口如何实现?
- 29. 如何实现这个场景在WPF
- 30. 如何实现这个推荐算法?
为什么这个问题是题外话? – 2014-09-12 17:03:52