Question

我是否可以在一端使用按钮实现自定义CSS边框，如下所示 没有网址（某些图片链接）？

注意：我想这样，因为当我想改变颜色时，我必须操纵图像。

enter image description here

我已经使用了图片JS Fiddle

#stretch {
    border-image: url(http://akitech.org/img/border.png) 30 30 stretch;
}

Answer 1

最简单的方法是使用CSS伪元素来创建装饰（左侧的圆圈）并屏蔽边框右侧的倒角（border-right否则会遇到的角度）：

div {
    border: 10px solid transparent;
    width: 250px;
    padding: 10px 20px;
    position: relative;
    /* this property has to be set to change the border-color: */
    border-bottom-color: #f90;
}

/* common shared styles: */
div::before,
div::after {
    /* to ensure the pseudo-elements are rendered: */
    content: '';
    /* for positioning: */
    position: absolute;
    /* positioning the element with its uppermost edge
       against the bottom of the element, against the
       upper side of the bottom-border: */
    top: 100%;
    /* again, set to change the color of the ends: */
    background-color: #f90;
}
div::before {
    /* position against the left edge: */
    left: 0;
    /* move the pseudo element 10px up, and
       10px left: */
    margin: -10px 0 0 -10px;
    height: 30px;
    width: 30px;
    /* making the pseudo-element a circle: */
    border-radius: 50%;
}
/* masking the chamfer of the border-bottom's
   right-most edge: */
div::after {
    left: 100%;
    /* making the height/width the same width
       as the border itself: */
    height: 10px;
    width: 10px;
}

div {
  border: 10px solid transparent;
  width: 250px;
  padding: 10px 20px;
  position: relative;
  border-bottom-color: #f90;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div id="stretch">Here, the image is stretched to fill the area.</div>

为了让这些边框适应文本的长度，要使用自定义边框的元素必须能够收缩到文本的宽度，使用float：

div {
    border: 10px solid transparent;
    position: relative;
    border-bottom-color: #f90;
    padding-left: 20px;
    /* forces the element to take up only that space required by
       its (non-floated) contents: */
    float: left;
    /* forces the floated elements to the next line: */
    clear: left;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  float: left;
  clear: left;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>

或者，更简单地说，使用display: inline-block：

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline-block;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline-block;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>

或display: inline（这些不会自动强制元素之间的换行）：

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline;
}

div {
  border: 10px solid transparent;
  position: relative;
  border-bottom-color: #f90;
  padding-left: 20px;
  display: inline;
}
div::before,
div::after {
  content: '';
  position: absolute;
  top: 100%;
  background-color: #f90;
}
div::before {
  left: 0;
  margin: -10px 0 0 -10px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
div::after {
  left: 100%;
  height: 10px;
  width: 10px;
}

<div>text</div>
<div>longer text</div>
<div>much longer text</div>
<div>much much much longer text</div>

Answer 2

<强>摘要：对于这个问题的简单方法，不应该使用svg，纯css可以很好地绘制作者期望的形状因为它是循环（边界半径）+ rect（粗线）的组合，让我们参考大卫的答案应该是在文本下绘制形状的最简单，最干净的方法。

//下面是我的调试历史和尝试（我搜索了许多方法来接近它）; //虽然不是很好的答案我使用background css属性（不是OP想要的）Op使用的border-image也有效。

<div class="custom-border" >SOME TEXT HERE</div>
<style>
    .custom-border{
   padding-left:20px;
   width:200px;  
   background:url(http://img1.wikia.nocookie.net/__cb20140224040010/shantae/images/b/bc/HGH_border_bottom.png) 0px 5px no-repeat;
background-size:contain;
height:150px;    
}
</style>

后来我意识到OP可能不喜欢使用传统的图像方式，我明白了问题是如何在纯CSS中绘制该形状并将其放置在文本下面，并且响应应该像svg形状将自动拉伸放置在其上的文本一样灵活。

之后，我发现了一些生成svg并放置在文本下的方法看看它是否适用于没有图像解决方案，或者你可以根据小提琴进行改进 http://jsfiddle.net/hahatey/hsfxS/1464/

在此过程中，我发现了这个从参考网址下面生成svg的有用工具：http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html

但缺点是它仍然是一个固定宽度的解决方案，线条svg不会自动延伸。

已经找到了一种不干净的方法来改善自动拉伸，但不是纯粹的css响应方式。但是自动拉伸可以通过动态改变线下来完成

<rect stroke="#ff0000" id="svg_2" height="8" width="100%" y="27" x="40" stroke-width="5" fill="#FF0000"/>

其中width =＆＃34; 100％＆＃34;或固定值=＆gt; width =＆＃34;函数返回值＆＃34 ;; // //在这次尝试中，我发现了一个小bug，jquery似乎无法在svg中选择svg或元素？但是svg元素标签属性可以用后端语言编写，所以仍然有效。

// 3.44 另一种不触及内部＆＃34; rect＆＃39;下面的元素＆＃34; svg＆＃34;标记，是为整个事物添加一个容器，并动态使用函数指定容器的宽度; 就像我在这个

中的尝试一样

小提琴：http://jsfiddle.net/hahatey/hsfxS/1468/

因此，至少宽度可以通过函数动态计算出来，以计算上部文本的文本长度，这样如果计算足够准确，该行就能够拉伸。如果其他人发现它，可以有其他方法使用纯css对文本执行svg auto strech。

感谢。

5.02 //因为作者没有说出容器内容有多复杂，我在纯css触发的效果中创建了一个演示---自动拉伸形状以及下方小提琴上面的文字。但我说它确实有许多限制但看起来很相似。

http://jsfiddle.net/hahatey/a9z1kyx7/

我的上部小提琴只能正确对齐单线自动拉伸

我想知道复杂的内容（多行，可能有很多块，内联混合标签元素，其中增加了对齐的复杂性）也可以使用css做这样的装饰宽度自动调整而不需要触摸javascript或后端语言。

带边框的CSS边框

2 个答案: