CSS - 只显示角落边界CSS - 只显示角落边界(CSS - show only corne

2019-05-03 23:44发布

站内文章 / 前沿技术

16 0

女 | 书童

私信

我不知道是否有可能在CSS或jQuery来使边框，但仅适用于角落。事情是这样的：

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

Answer 1:

我会用重叠的div。

一个具有方角。另用圆角（所以它不会隐藏第一个角落）。

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

结果：

通过@网络忻提供增强的解决方案：

http://jsfiddle.net/webtiki/y3EfP/147/

Answer 2:

假设<div id="content">CONTENT</div>和CONTENT包括至少一个HTML节点。

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

这里有一个小提琴

Answer 3:

SVG

这又是一个伟大的选择，如果你现在要开始使用向量允许很大的反应。

 <svg viewBox="0 0 100 100" width="50px"> <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" /> <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" /> <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" /> <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" /> </svg>

SVG是使用一个很好的工具。一些在这种情况下使用SVG的优点是：

曲线控制
填充控制（不透明度，颜色）
行程控制（宽度，不透明度，颜色）
的代码量
时间来建立和保持形状
可扩展
没有HTTP请求（如果在例如嵌入使用，等等）

内联SVG 浏览器的支持可以追溯到到Internet Explorer 9，见canIuse以获取更多信息。

Answer 4:

这里有几个方法，而无需使用任何额外的虚拟/真实的元素 ，创造出这种效果。有一点要注意的是，这两种方法只会工作在现代浏览器，因为它们使用CSS3属性。

使用 border-image ：在border-image特性使得它非常容易创建这样的效果。该方法如下：

创建具有边界只是喜欢角落透明图像这里。
设置此图像作为border-image-source ，让浏览器负责其余的:)由于默认值border-image-repeat是stretch ，浏览器将伸展原始图像，以适应容器，即使该容器变大。
用于设置的值border-image-width属性确定的边界如何厚是。

 .bordered { background-color: beige; border-image-source: url("http://i.stack.imgur.com/s2CAw.png"); border-image-slice: 1; border-image-width: 5px; } .square { height: 150px; width: 150px; } .large-square { height: 350px; width: 350px; } /* Just for demo */ div { margin-bottom: 10px; }

 <div class='bordered square'></div> <div class='bordered large-square'></div>

好处：

不需要额外的元件（伪或真），这意味着更简洁的标记，伪构件可用于其它需要。
合理响应。这是浏览器会适应的边界，即使容器的尺寸发生变化。

缺点：

相对较低的浏览器支持。如果需要IE10-支持，那么这是一个不走。

由于边界图像被拉伸得到，如果原始图像的画布是一个正方形和容器是一个矩形，则边框看起来比左侧和右侧的顶部和底部宽。

 .bordered { background-color: beige; border-image-source: url("http://i.stack.imgur.com/s2CAw.png"); border-image-slice: 2; border-image-width: 5px; } .small-square { height: 75px; width: 75px; } .square { height: 150px; width: 150px; } .large-square { height: 350px; width: 350px; } .rectangle { height: 150px; width: 250px; } .large-rectangle { height: 150px; width: 350px; } /* Just for demo */ div { margin-bottom: 10px; }

 <div class='bordered small-square'></div> <div class='bordered square'></div> <div class='bordered large-square'></div> <div class='bordered rectangle'></div> <div class='bordered large-rectangle'></div>

使用 background-image ：该background-image属性也可以与使用linear-gradient的图像，以产生效果。该方法如下：

创建四个linear-gradient的图像（两个用于顶部，底部和两个用于左，右）。这些梯度将开始与需要的颜色，并继续是颜色的像素是边界图像的宽度/高度。之后，它应该是透明的。
对于顶部和底部边框，梯度的方向应该是to right 。对于左，右的边界，它应该是to bottom 。
的background-size值确定边框的厚度。对于顶部和底部边界，所述梯度图像的大小将是在Y轴的X轴和5像素（厚度）100％。对于左，右边界，该尺寸将5PX在Y轴中的X轴（厚度）和100％。
该background-repeat应设置为repeat-x的顶部，底部边框和repeat-y的左侧和右侧边框。
该background-position被设置为（-1 *在渐变的颜色的一半大小）在X或Y轴为适当。这是为了使着色面积的一半在元件的一侧出现，而另一半出现在另一侧（因为梯度重复）。

 .bordered.square { height: 150px; width: 150px; } .bordered.rectangle { height: 150px; width: 250px; } .bordered { background-color: beige; background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px); background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%; background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; } /* Just for demo */ div { margin-bottom: 10px; }

 <div class='bordered square'></div> <div class='bordered rectangle'></div>

好处：

不需要额外的元件（伪或真），这意味着更简洁的标记，伪构件可用于其它需要。

合理响应作为梯度的颜色的宽度是固定的。如果边界划线的宽度需要根据容器的尺寸改变那么我们可以在下面的代码片段改变梯度个像的像素值（有一些比较小的变动）。

 .bordered.square { height: 150px; width: 150px; } .bordered.large-square { height: 250px; width: 250px; } .bordered { background-color: beige; background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%); background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%; background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%; background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; } /* Just for demo */ div { margin-bottom: 10px; }

 <div class='bordered square'></div> <div class='bordered large-square'></div>

缺点：

相对更好的浏览器的支持。如果需要IE9-支持，那么这是一个不走。
如果基于百分比梯度用于然后用矩形相同的缺点，因为提到border-image将适用此也。

Answer 5:

你可以绝对位置的4个<div> S，一个在每个角落，每一个与两个合适的边界。

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

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

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

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

.right {
  right: 0;
  border-right: 1px solid;
}

Answer 6:

你可以做到这一点使用多个线性渐变作为背景图像。

 div { width: 100px; height: 100px; margin: 20px; background: linear-gradient(to right, black 4px, transparent 4px) 0 0, linear-gradient(to right, black 4px, transparent 4px) 0 100%, linear-gradient(to left, black 4px, transparent 4px) 100% 0, linear-gradient(to left, black 4px, transparent 4px) 100% 100%, linear-gradient(to bottom, black 4px, transparent 4px) 0 0, linear-gradient(to bottom, black 4px, transparent 4px) 100% 0, linear-gradient(to top, black 4px, transparent 4px) 0 100%, linear-gradient(to top, black 4px, transparent 4px) 100% 100%; background-repeat: no-repeat; background-size: 20px 20px; }

 <div></div>

Answer 7:

夹路径

使用在彼此顶部的两个div的。
并增加了夹路径的div在后面，你可以创建一个像效果的边框。

 .wrapper { display: inline-block; background-color: black; line-height: 0px; -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%); } .wrapper {} .wrapper div { display: inline-block; height: 150px; width: 150px; margin: 10px; background-color: white; }

 <div class="wrapper"> <div></div> </div>

两个伪元素

使用两个大伪元素，你可以创建边框效果。

 .cut-border { position: relative; display: inline-block; border: 5px solid black; width: 150px; height: 150px; } .cut-border::before { content: ""; position: absolute; height: calc(100% + 10px); width: 50%; background-color: white; top: -5px; left: 25%; } .cut-border::after { content: ""; position: absolute; height: 50%; width: calc(100% + 10px); background-color: white; top: 25%; left: -5px; }

 <div class="cut-border"></div>

Answer 8:

我发现这个问题，但我还是不满意边界半径的方法：当我使用更厚的边框，效果并不像我想的好。我成功地创造出另一种解决方案，没有图像，没有任何额外的标记：

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

下面是这个示例的jsfiddle： https://jsfiddle.net/t6dbmq3e/希望它能帮助。

Answer 9:

好吧，我在CSS吸吮我想我不能做我自己，但我做到这一点，似乎工作：

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

它似乎是工作;-)对不起，打扰和感谢您的帮助。

Answer 10:

有没有干净的CSS办法只是给圆角的边框，但你可以尝试模仿的效果。像这样的事情也许： http://jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

由于在边界半径之差，底层div的背景颜色显示槽，给人一种边界上的角落的效果。

我个人认为，我将与背景图片努力实现这一点，结果更好CONTROLE。

Answer 11:

这是你的照片：

HTML：

<div class="shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

和CSS：

.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

Answer 12:

这里是上面的回答修改后的版本，该版本已经相对定位的父和绝对定位的孩子，所以我们可以在悬停效果添加。

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}

Answer 13:

下面是一些我最近与内容居中垂直和水平。

该HTML

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

在CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

的jsfiddle

Answer 14:

我认为最好的解决办法是伪元方法。尼斯和干净，不污染带（太多）额外的元素的HTML。

我使用上面的代码，用于复制和粘贴溶液创建此SASS混入：

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

然后你可以使用它像这样：

HTML：

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

您需要的z-index和相对位置有这样的内容坐在伪元素之上。

我在这里做了一个演示codepen： http://codepen.io/timrross/pen/XMwVbV

Answer 15:

 .box{ background-color: aquamarine; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 300px; height: 200px; border: 30px solid black; } .box::before{ content:''; position: absolute; top:25px; left:-30px; height: 150px; width: 360px; background: aquamarine; } .box::after{ content:''; position: absolute; top:-30px; left:30px; height: 260px; width: 240px; background: aquamarine; }

 <div class="box"> </div>

文章来源: CSS - show only corner border

标签： jquery css css3 border css-shapes

混吃等死

女 | 书童

私信

收藏的人(0)

Ta的文章更多文章

0条评论

还没有人评论过~

CSS - 只显示角落边界CSS - 只显示角落边界(CSS - show only corne

Answer 1:

Answer 2:

Answer 3:

SVG

Answer 4:

Answer 5:

Answer 6:

Answer 7:

夹路径

两个伪元素

Answer 8:

Answer 9:

Answer 10:

Answer 11:

Answer 12:

Answer 13:

Answer 14:

HTML：

SCSS

Answer 15:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮