How to draw a line with css and show text or image on it

后端 未结 4 1590
后悔当初
后悔当初 2021-01-22 17:26

I\'m trying to draw a line using CSS and show text/image in the middle of the line.

相关标签:
4条回答
  • 2021-01-22 17:54

    Wrap the text inside a span and use a :pseudo-element for the line.

    Position the line(:pseudo-element) behind the span using z-index: -1, so that you could move around the text without having to worry about the line.

    .featured-images {
      position: relative;
      color: #666666;
      border: 2px solid #333333;
      padding: 0 10px 0 30px;
    }
    .featured-images span {
      color: #666666;
      background: white;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: #666666;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }
    <p class="featured-images"><span>Featured</span></p>


    Replicating the following:

    enter image description here

    enter image description here

    enter image description here

    You could use repeating-linear-gradient to do this.

    body {
      background: #E7EAE3;
    }
    .featured-images {
      position: relative;
      color: #666666;
      padding: 0 10px 0 30px;
      overflow: hidden;
    }
    .featured-images span {
      color: #517575;
      background: white;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 120%;
      height: 100%;
      background: -webkit-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
      background: -moz-repeating-linear-gradient(180deg, #463A3A 10px, #F2F2F2 10px, #F2F2F2 11px, #463A3A 11px, #463A3A 20px) repeat-x;
      background-size: 10px 31px;
      margin-left: -30px;
      transform: skew(-45deg);
      left: 0;
      z-index: -1;
    }
    <p class="featured-images"><span>Featured</span>
    </p>


    Using image instead of text.

    .featured-images {
      position: relative;
      color: #666666;
      border: 2px solid #333333;
      padding: 0 10px 0 30px;
    }
    .featured-images span {
      display: block;
      width: 80px;
      height: 13px;
      background: url(http://lorempixel.com/80/13) no-repeat white 10px 0;
      padding: 0 10px;
    }
    .featured-images:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background: #666666;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -1;
    }
    <p class="featured-images"><span></span></p>

    0 讨论(0)
  • 2021-01-22 17:58

    Demo 1

    enter image description here

    :root{padding: 40px}
    p{
    
        position: relative;
        margin:40px auto;padding:0 10px;
        background:white;
        display:inline-block;
    }
    p:before,p:after{
        content:"";
        position:absolute;
        z-index:-1;
        right:0
    }
    p:before{
        top:-4px;
        left: -24px;
        height: 24px;
        width: 480px;
        border:solid 1px #666666
    }
    p:after{
        top: 50%;
        width: 466px;
        left: -16px;
        border-top: solid 1px #666666
    }
    <p class="featured-images">Featured</p>

    Use Pseudo element

    :root{padding: 40px}
    p{
    
        position: relative;
        margin:40px auto;padding:0 10px;
        background:white;
        display:inline-block;
    }
    p:before,p:after{
        content:"";
        position:absolute;
        z-index:-1;
        left:-14px;
        right:0;
        width: 480px
    }
    p:before{
        top:-4px;
        height: 24px;
        border:solid 1px #666666
    }
    p:after{
        top:50%;
        border-top:solid 1px #666666
    }
    <p class="featured-images">Featured</p>

    Demo 2

    p{
    
        position: relative;
        margin:0;padding:0 10px;
        background:white;
        display:inline-block;
    }
    
    p:after{
        content:"";
        position:absolute;
        top:50%;
        left:-14px;
        right:0;
        width: 100vw;
        border-top:solid 1px #666666;
        z-index:-1;
    }
    <p class="featured-images">Featured</p>

    Update

    enter image description here

    :root{padding: 40px}
    p{
    
        position: relative;
        margin:40px auto;padding:0 10px;
        background:white;
        display:inline-block;
    }
    p:before,p:after{
        content:"";
        position:absolute;
        z-index:-1;
        right:0
    }
    p:before{
        top:-4px;
        left: -24px;
        height: 24px;
        width: 480px;
        border:solid 1px #666666;
        background-color: gray;
        background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, rgba(255,255,255,.5) 2px, rgba(255,255,255,.5) 6px)
    }
    }
    p:after{
        top: 50%;
        width: 466px;
        left: -16px;
        border-top: solid 1px #666666
    }
    <p class="featured-images">Featured</p>

    0 讨论(0)
  • 2021-01-22 18:12

    Something like this? JSFiddle

    CSS:

    .featured-images {
        color: #666666;
    }
    p span {
        margin:0;padding: 0 10px;
        background: #FFFFFF;
        display: inline-block;
    }
    p {
        padding-left: 20px;
        position: relative;
        z-index: 2;   
    }
    p:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        border-top: solid 1px #666666;
        z-index: -1;
    }
    
    0 讨论(0)
  • 2021-01-22 18:14

    Result http://jsfiddle.net/p8jdzqvL/embedded/result/

     <div style="height: 2px; background-color: black; text-align: center">
          <span style="background-color: white; position: relative; top: -0.5em;">
            Stay Connected
          </span>
        </div>
    
    0 讨论(0)
提交回复
热议问题