使用HTML和CSS创建一个L形边框，是可能吗？ [英] Create an L-shaped border using HTML and CSS, is it possible?

问题描述

是否可以仅使用HTML和CSS创建一个L形边框？

Is it possible to create an L-shaped border like this using only HTML and CSS?

编辑：这是我现在有的： http://jsfiddle.net/cBwh8/

That is what I have at the moment: http://jsfiddle.net/cBwh8/

Edit2：I'm寻找复制上面的图片 - 适当弯曲的圆角。这是我在这里遇到困难的主要原因： http://jsfiddle.net/cBwh8/1/

I'm looking to replicate the picture above -- appropriately curved round corners. This is the main reason I'm having difficulties here: http://jsfiddle.net/cBwh8/1/

推荐答案

尝试以下方法：为我工作

Try this: worked for me

div.outer {
    margin: 10px;
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    border-radius: 10px;
}

div.inner {
    width: 160px;
    height: 160px;
    border-right: 1px solid blue;
    border-bottom: 1px solid blue;
    margin-top:-1px;
    margin-left:-1px;
    background:#FFF;
}

这篇关于使用HTML和CSS创建一个L形边框，是可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！