CSS框上的倾斜角 [英] Slanted Corner on CSS box
问题描述
我一直在玩CSS很短的时间,我试图有一个正常的盒子,但左上角以45度角切断。不是少量;我在看那个角度的一个相当大的角落。此效果:
h1>说明
精彩( http://meyerweb.com/eric/css/edge/slantastic/demo.html )支持旧版浏览器。对于特定CSS3,请尝试使用CSS多边形: http://alastairc.ac/2007/02 / dissecting-css-polygons / 。
代码
HTML:
< div class =cornered>< / div>
< div class =main> Hello< / div>
CSS:
.cornered {
width:160px;
height:0px;
border-bottom:40px solid red;
border-right:40px solid white;
}
.main {
width:200px;
height:200px;
background-color:red;
}
结果: http://jsfiddle.net/mdQzH/
替代代码
要在边框部分使用透明边框和文本... HTML:
< div class = outer>
< div class =cornered>这里可以放置文本
,但是如果你想要它跟随倾斜你必须堆栈
其中的几个。 / div>
< div class =main> Hello hello hello hello
hello hello hello hello hello< / div>
< / div>
CSS:
.outer {
background-color:#ccffff;
padding:10px;
font-size:x-small;
}
.cornered {
width:176px;
height:0px;
border-bottom:40px solid red;
border-left:40px solid transparent;
}
.main {
width:200px;
height:200px;
background-color:red;
padding:0 8px;
}
结果: http://jsfiddle.net/76EUw/2
I have been playing with CSS for only a short time and am trying to have a normal box but with the top left hand corner cut off at a 45 degree angle. Not a small amount either; I'm looking at a quite large corner cut at that angle. This effect:
How should I go about it?
Descriptions
Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) supports old browsers. For CSS3-specific, try CSS polygons: http://alastairc.ac/2007/02/dissecting-css-polygons/.
Code
The HTML:
<div class="cornered"></div>
<div class="main">Hello</div>
The CSS:
.cornered {
width: 160px;
height: 0px;
border-bottom: 40px solid red;
border-right: 40px solid white;
}
.main {
width: 200px;
height: 200px;
background-color: red;
}
The result: http://jsfiddle.net/mdQzH/
Alternative Code
To use transparent borders and text in the border section... The HTML:
<div class="outer">
<div class="cornered">It's possible to put text up here, too
but if you want it to follow the slant you have to stack
several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>
The CSS:
.outer {
background-color: #ccffff;
padding: 10px;
font-size: x-small;
}
.cornered {
width: 176px;
height: 0px;
border-bottom: 40px solid red;
border-left: 40px solid transparent;
}
.main {
width: 200px;
height: 200px;
background-color: red;
padding: 0 8px;
}
The result: http://jsfiddle.net/76EUw/2
这篇关于CSS框上的倾斜角的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!