如何在对角元素上创建CSS边框 [英] How can I create a CSS border on a diagonal element
问题描述
这是一个例子。 http://jsfiddle.net/52c7t/
简单:我想要获得右边的div,有一个边框像在左边的div。 (我想要边框在右侧div的左侧)
我尝试了100万种不同的组合,但是没能做到。我试图避免做一个图像和这样做与CSS。
感谢您的帮助!
更新:
$ b
我的意思的形象。对我的平面设计技巧很抱歉:P
HTML
< div id =top_bar>
< div id =top_left_button> border< / div>
< div class =trapezoid>无< / div>
< / div>
CSS >
.trapezoid {
vertical-align:middle;
position:absolute;
border-bottom:60px solid blue;
border-left:45px solid transparent;
border-top-left-radius:30px;
* border-top-right-radius:15px;
* border-bottom-right-radius:3px;
height:0;
width:50px;
display:inline-block;
right:1px;
}
#top_bar {
background-color:#000;
border-bottom:1px solid#666;
color:#222;
position:fixed;
left:0px;
top:0px;
width:100%;
overflow:hidden;
height:50%;
font-weight:normal;
white-space:nowrap;
color:white;
z-index:20;
line-height:45px;
min-width:320px;
max-width:320px;
max-height:48px;
border-radius:5px;
text-shadow:rgba(0,0,0,0.6)0px -1px 0px;
}
#top_bar:after {
content:'';
width:10%;
display:inline-block;
font-size:0;
line-height:0
}
#top_title,#top_left_button,#notifications,#top_right_button {
color:white;
height:100%;
overflow:hidden;
display:inline-block;
text-align:center;
vertical-align:middle;
}
#top_left_button,#top_right_button {
width:20%;
background:rgba(100,255,255,.1);
}
#top_left_button {
border-right:2px solid#666;
}
EDIT: UPDATED LINK
简单的解决方案是创建另一个div,因为你的蓝色div已经使用border属性。
新的div本质上是一个蓝色div的克隆,但是会使用CSS width属性被染成红色和一个更大的。
新div的示例:
.trapezoid-border {
vertical-align:middle;
position:absolute;
border-bottom:60px solid red; / *颜色改变将是伪边框颜色* /
border-left:45px solid transparent;
border-top-left-radius:30px;
* border-top-right-radius:15px;
* border-bottom-right-radius:3px;
height:0;
width:53px; / *额外3像素相比.trapezoid类宽度* /
display:inline-block;
right:1px;
}
Here is an example. http://jsfiddle.net/52c7t/
Simply: I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div)
I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css.
Thanks for your help!
UPDATE:
Image of what I mean. Sorry about my graphic design skills :P
HTML
<div id = "top_bar">
<div id="top_left_button" >border</div>
<div class = "trapezoid"> none </div>
</div>
CSS
.trapezoid{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid blue;
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 50px;
display: inline-block;
right:1px;
}
#top_bar{
background-color: #000;
border-bottom: 1px solid #666;
color: #222;
position:fixed;
left:0px;
top: 0px;
width:100%;
overflow:hidden;
height: 50%;
font-weight: normal;
white-space: nowrap;
color: white;
z-index:20;
line-height: 45px;
min-width:320px;
max-width: 320px;
max-height:48px;
border-radius: 5px;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
}
#top_bar:after {
content: '';
width: 10%;
display: inline-block;
font-size: 0;
line-height: 0
}
#top_title, #top_left_button, #notifications, #top_right_button {
color: white;
height: 100%;
overflow:hidden;
display: inline-block;
text-align: center;
vertical-align: middle;
}
#top_left_button,#top_right_button{
width: 20%;
background: rgba( 100, 255, 255, .1 );
}
#top_left_button{
border-right: 2px solid #666;
}
EDIT: UPDATED LINK
The simple solution is to create another div since your blue div is already made up using the border property.
That new div is essentially a clone of the blue div, but will be colored red and made a little larger using the CSS width property. This becomes a pseudo border for the blue div.
Example of new div:
.trapezoid-border{
vertical-align: middle;
position:absolute;
border-bottom: 60px solid red; /* Color Changed will be pseudo-border color */
border-left: 45px solid transparent;
border-top-left-radius:30px;
*border-top-right-radius:15px;
*border-bottom-right-radius:3px;
height: 0;
width: 53px; /* Extra 3 pix when compared to .trapezoid class width */
display: inline-block;
right:1px;
}
这篇关于如何在对角元素上创建CSS边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!