如何捏在CSS中的一行 [英] How to pinch the middle of a line in css

问题描述

我正在尝试制作几乎看起来像是衬线的线条。从本质上讲，我希望使用css来扩大它的最终目标，减少中间的目标。这实际上证明是一个相当大的挑战。

任何帮助将不胜感激。

到目前为止，我已经能够看到我希望如何在伪选择器之后使用：但顶部没有运气，而我似乎只能看到凹面，而不是



下面是我迄今为止所做的代码



  .line {
 background：none; 
 height：8px; 
职位：亲属; 
 overflow：hidden; 
 z-index：1; 
 top：50px; 
 left：50px; 
 width：140px; 
 box-shadow：11px 12px 16px -3px rgba（0,0,0,0.6）; 
 -webkit-transform：rotate（38deg）; 
 transform：rotate（38deg）; 
} 
 .line：在{
 content：''; 
位置：绝对;剩余
：0％; 
宽度：100％; 
填充底部：10％; 
 top：50％; 
 border-radius：35％; 
 box-shadow：0px 0px 0px 150px rgba（0,0,0,0.6）; 
 z-index：-1; 
} 
 .line：之前{
 content：''; 
位置：绝对;剩余
：0％; 
宽度：100％; 
填充底部：8％; 
 top：-30％; 
 border-radius：35％; 
 box-shadow：0px 0px 0px 150px rgba（255,255,255，1）; 
 z-index：24！重要; 
} 
  

和HTML



 < section class =stage> 
< figure class =line>< / figure> 
< / section> 
  

这是我迄今为止的小提琴（另外，我需要旋转它某些地区）

http://jsfiddle.net/

感谢您的帮助！

解决方案

如果你有一个简单的背景色，你可以用伪元素来做到这一点：

DEMO

HTML：

 < section class =stage> 
< figure class =line>< / figure> 
< / section> 
  

CSS：

  .line {
 height：8px; 
职位：亲属; 
 overflow：hidden; 
 z-index：1; 
 top：50px; 
 left：50px; 
 width：140px; 
 -webkit-transform：rotate（38deg）; 
 transform：rotate（38deg）; 
 background：rgba（0,0,0,0.6）; 
} 
 .line：after，.line：before {
 content：''; 
位置：绝对; 
剩下：0; 
宽度：100％; 
身高：100％; 
 border-radius：35％; 
背景：#fff; 
} 
 .line：在{
 top：5px; 
} 
 .line：之前{
 bottom：5px; 
} 
  

I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge.

Any help would be appreciated.

Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex.

Here's the code of what I've done so far

    .line {
        background:none;
        height: 8px;
        position:relative;
        overflow:hidden;
        z-index:1;
        top: 50px;
        left: 50px;
        width: 140px;
        box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6);
        -webkit-transform: rotate(38deg);
        transform: rotate(38deg);
    }
    .line:after {
        content: '';
        position: absolute;
        left: 0%;
        width: 100%;
        padding-bottom: 10%;
        top: 50%;
        border-radius: 35%;
        box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6);
        z-index: -1;
    }
    .line:before {
        content: '';
        position: absolute;
        left: 0%;
        width: 100%;
        padding-bottom: 8%;
        top: -30%;
        border-radius: 35%;
        box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1);
        z-index: 24 !important;
    }

and the HTML

<section class="stage">
    <figure class="line"></figure>
</section>

Here's the fiddle of what I have thus far (also, I'm gonna need to rotate it for certain areas)

http://jsfiddle.net/speo9bfv/1/

Thanks for the help!

解决方案

If you have a plain background color, you can do this with pseudo elements :

DEMO

HTML :

<section class="stage">
    <figure class="line"></figure>
</section>

CSS :

.line {
    height: 8px;
    position:relative;
    overflow:hidden;
    z-index:1;
    top: 50px;
    left: 50px;
    width: 140px;
    -webkit-transform: rotate(38deg);
    transform: rotate(38deg);
    background:rgba(0,0,0,0.6);
}
.line:after, .line:before {
    content:'';
    position: absolute;
    left:0;
    width:100%;
    height:100%;
    border-radius: 35%;
    background:#fff;
}
.line:after{
    top:5px;
}
.line:before{
    bottom:5px;
}

这篇关于如何捏在CSS中的一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！