css partial border to create 'place holder'

安稳与你 提交于 2020-05-11 12:59:44

问题


Using CSS, how can I create a partial border as per image below

enter image description here

I can get the complete border with:

border: 1px solid #f5f5f5; 

but only want to show maybe 30px at the top and botton of the vertical border with nothing imbetween?

can this be acheived?

Thanks as always,


回答1:


There is a CSS solution, but it's complicated and also requires HTML markup:

#box {
    width: 200px;
    height: 200px;
    margin: 30px;
    position: relative;
}

#box > div.corner {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
}

.top {
    top: 0px;
    border-top-style: solid;
}

.bottom {
    bottom: 0px;
    border-bottom-style: solid;
}

.left {
    left: 0px;
    border-left-style: solid;
}

.right {
    right: 0px;
    border-right-style: solid;
}
<div id="box">
    <div class="corner top left"></div>
    <div class="corner top right"></div>
    <div class="content">content</div>
    <div class="corner bottom left"></div>
    <div class="corner bottom right"></div>
</div>

DEMO



来源:https://stackoverflow.com/questions/12445347/css-partial-border-to-create-place-holder

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!