Horizontal Line in Background Using CSS3

Horizontal Line in Background using Css3

Here's one way to do it by adding a span inside the p.

HTML:

<p class="datedAside"> <span> 4 weeks ago </span> </p>​

CSS:

p {background: #000; height:1px; margin-top:10px;}
p span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}​

DEMO: http://jsfiddle.net/9GMJz/

CSS technique for a horizontal line with words in the middle

This is roughly how I'd do it: the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height. The text is then put in a nested span with a non-transparent background.

h2 {   width: 100%;    text-align: center;    border-bottom: 1px solid #000;    line-height: 0.1em;   margin: 10px 0 20px; } 
h2 span {     background:#fff;     padding:0 10px; }

<h2><span>THIS IS A TEST</span></h2><p>this is some content other</p>

How can I create vertically repeating horizontal dashed lines in css

One of the ways this can be obtained is by stacking gradients. You will have one gradient representing the colored-horizontal lines, then adding in white vertical lines as a second gradient. (It can be white, or what ever color your background is).

.solid-lines {
  padding-left:5px;
  background-image:linear-gradient(to right, #fff 5px, transparent 1px), linear-gradient(#ccc 1px, transparent 1px);
  background-size: 20px 30px;
}

The added padding is for the offset of the first line. The background size (20px) represents the space in-between each white vertical line, and '5px' is the size of that line. Tweak these numbers to get the dashed look you want.

http://jsbin.com/weyozutawiva/1/

Create a beautiful horizontal line with CSS only

I would use a radial-gradient to a pseudo-element instead of a box-shadow since it tapers off towards the edges nicer.

Position the radial-gradient above the <hr> so that it's cut in half. Then position another psuedo-element just below the <hr>with a the same color as the background and height just large enough to cover the rest of the gradient.

Updated JSFiddle

---

CSS

hr.fancy-line { 
    border: 0; 
    height: 1px;

}
hr.fancy-line:before {
    top: -0.5em;
    height: 1em;
}
hr.fancy-line:after {
    content:'';
    height: 0.5em;
    top: 1px;
}

hr.fancy-line:before, hr.fancy-line:after {
    content: '';
    position: absolute;
    width: 100%;
}

hr.fancy-line, hr.fancy-line:before {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 75%);
}

body, hr.fancy-line:after {
    background: #f4f4f4;
}

horizontal line of repeating CSS triangles

Use a conic-gradient(). Adjust the variable s to control the size and the 80px to control the distance between triangles

.box {
  --s: 25px;
  height:200px;
  background:
   conic-gradient(from -135deg at var(--s) 50%,red 90deg,#0000 0) center/80px calc(2*var(--s)) repeat-x
}

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

---

Related Topics