I need to style a horizontal line <hr> like the picture attached. Is there any way to do this with pure css that would also work in IE8?
EDIT: Sorry, I missed your IE8 requirement...this probably won't work there. I apologize. I don't have access to it to check.
You can use the :before and create a box, rotate it, apply some border, absolutely position it and voila, there you have it:
http://jsfiddle.net/v7y1bp9s/1/
HTML:
<div class="container">
<hr class="line"></hr>
</div>
CSS:
.container {
float: left;
width: 100%;
height: 50px;
background-color: #1978a4;
line-height: 50px;
}
hr.line {
border-color: #fff;
position: relative;
}
hr.line:before {
content: '';
height: 10px;
width: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
left: 50px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-color: #1978a4;
top: -5px;
}
Related
I want to make cross sign (X) in a red circle.
Here is my try:
.crosssign {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.crosssign_circle {
position: absolute;
width:22px;
height:22px;
background-color: red;
border-radius:11px;
left:0;
top:0;
}
.crosssign_stem {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
left:11px;
top:6px;
}
.crosssign_stem2 {
position: absolute;
width:3px;
height:9px;
background-color:#fff;
right:11px;
top:6px;
}
But it looks like this:
So how can I place the stem in the right order to make the X sign?
And the HTML is also here:
<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>
One of the reason why your stems are not appearing as they should is because you forgot to add position: relative to the parent .crosssign element. There is an easier way to get about this:
Use the top: 50%; left: 50%; transform: translate(-50%, -50%) trick to vertically and horizontally center the stems
Ensure that stem and stem2 have their width and height flipped (so that they appear 90deg rotated relative to each other)
Apply transform: rotate(45deg) on the parent element
Moreover, you do not need to add vendor prefixes to CSS transform: all browsers today (even IE11) supports the unprefixed version.
Here is a proof-of-concept example:
.crosssign {
display: inline-block;
width: 22px;
height: 22px;
position: relative;
transform: rotate(45deg);
}
.crosssign_circle {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
border-radius: 11px;
left: 0;
top: 0;
}
.crosssign_stem,
.crosssign_stem2 {
position: absolute;
background-color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.crosssign_stem {
width: 3px;
height: 9px;
}
.crosssign_stem2 {
width: 9px;
height: 3px;
}
<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>
With a shorter code you could obtain the same result using a pseudoelement containing the unicode symbol U+00D7
.crosssign {
display: inline-grid;
place-content: center;
aspect-ratio: 1;
min-inline-size: 1.25em;
border-radius: 50%;
background-color: #d12021;
}
.crosssign::before {
content: "\D7";
color: #fff;
font-weight: bold;
}
<span class="crosssign"></span>
I'd suggest you use flexbox to center the items in the circle. And then rotate both stems. Also, you can use the same class for both stems, so css is lighter. Here's the code
.crosssign {
display:flex;
justify-content: center;
align-items: center;
width: 22px;
height:22px;
background-color: red;
border-radius:11px;
}
.crosssign_stem {
position: absolute;
width:4px;
height:11px;
background-color:#fff;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.crosssign_stem.right {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
<span class="crosssign">
<div class="crosssign_stem"></div>
<div class="crosssign_stem right"></div>
</span>
Cheers!
I've the following problem: I want headlines with background and a box-shadow. Now, as firefox is not rendering transform rotate like a charm, I'm looking for an alternative.
h2 {
padding: 1rem 2rem;
display: inline-block;
color: #FFF;
background-color: #006AB3;
transform: translateZ(1px) rotate(-3deg);
transform-origin: 50% 50%;
margin-bottom: rem-calc(50px);
outline: 1px solid transparent;
z-index:1;
&:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
background: rgba(0,0,0,.3);
right:-10px;
bottom:-10px;
outline: 1px solid transparent;
z-index: -1;
}
}
https://jsfiddle.net/gw64ove4/
Why is the pseudo after Element not stacked behind the headline? Are there any other workarounds for anti aliasing when using box-shadow on a rotated element?
Thanks
Try adding a span in H2 tag:
<h2>
<span>TEXT</span>
</h2>
and CSS for span like this:
span {display: block; position: relative; z-index: 10;}
https://jsfiddle.net/zLna2xLa/
Also you can try using -moz- prefixes
EG::
-moz-transform: translateZ(1px) rotate(-3deg);
-moz-transform-origin: 50% 50%;
Is there an easier or better way to create this particular shape/combination of shapes in CSS3 than what am I currently doing? I have tried a few different things already.
The downward facing triangle should be sitting just below the three lines, but I can't seem to get it there.
I want it to look like this:
https://jsfiddle.net/s6bcjzjr/
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
.triangle {
position: relative;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
I switch the triangle container's border to top and adjusted the margins
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}
.triangle {
position: relative;
margin: auto;
top: -10.5px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin: 3px 0 0 0;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
Using SVG:
You can create this easily using SVG. There is nothing complex and all that you would need is three line elements and one path element.
All three line elements have two co-ordinates where (x1,y1) represent the starting point of the line and (x2,y2) represent the ending point of the line.
The path element takes a path (d) and it value can be interpreted as follows:
M5,20 - Move to the point which is 5px to the right of the container and 20px down.
L95,20 - Draw a line from the previous point (5,20) to (95,20).
L50,45 - Draw a line from the previous point (95,20) to (50,45).
z - Close the path. That is, draw a line connecting the point (50,45) and the starting point.
svg {
height: 100px;
width: 50px;
}
line,
path {
stroke: #e74c3c;
stroke-width: 2;
}
path {
fill: none;
stroke-linejoin: bevel;
}
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<g id='graphic'>
<line x1='5' y1='5' x2='95' y2='5' />
<line x1='5' y1='10' x2='95' y2='10' />
<line x1='5' y1='15' x2='95' y2='15' />
<path d='M5,20 L95,20 L50,45z' />
</g>
</svg>
Using CSS with single element:
You can achieve the same shape using a single element also with CSS. Below is a sample snippet for the same. Below is an explanation of how the shape is achieved.
The parent anchor tag which has the height and width of the container.
The :before pseudo-element which is positioned absolutely with respect to the container and is 20px tall. The background of this element is a linear-gradient which has the required color for 2px and is transparent for the remaining part. Gradients by default repeat to fill its container and so this single background pattern produces the three lines.
The :after element is again positioned absolutely with respect to the container. This pseudo-element is then rotated such that its left and bottom borders produce angled parts of the triangle. Another linear-gradient background produces the top line of the triangle.
I have calculated height and width of the :after pseudo using Pythagoras theorem. If container is not a square then you have to manually calculate the values.
a {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
}
a:before {
position: absolute;
content: '';
top: 3px;
left: 0px;
height: 20px;
width: 100%;
background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px);
background-size: 100% 5px;
}
a:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
height: calc(50px / 1.414);
width: calc(50px / 1.414);
border-bottom: 2px solid #e74c3c;
border-left: 2px solid #e74c3c;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%);
}
<a href='#'></a>
.triangle-container {
top: -35px;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
https://jsfiddle.net/s6bcjzjr/6/
i've updated your fiddle and now your shape looks perfect. What I did is changed the border-bottom to border-top of the triangle-container, and adjusted height and margin to align the triangle perfectly
here is the fiddle - https://jsfiddle.net/s6bcjzjr/5/
The answer is:
.triangle-container {
top: -36px;
}
See it here:
.triangle-container {
top: -36px;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
.triangle {
position: relative;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
A one element method using before and after (fiddle):
.down-arrow {
display: inline-block;
position: relative;
width: 30px;
height: 14px;
border-top: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.down-arrow::before {
display: block;
position: absolute;
top: 3px;
right: 0;
left: 0;
height: 3px;
border-top: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
content: '';
}
.down-arrow::after {
display: block;
position: relative;
top: 4px;
left: 0;
right: 0;
width: 21px;
height: 21px;
margin: 0 auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
content: '';
}
.triangle-container {
top: 0px;
width: 30px;
height: 1px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}
.triangle {
position: absolute;
margin: auto;
top: -12px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
What I'm trying to do LOOKS simple, but I can't seem to figure out how to do it.
As you can see in my image there are a couple of red lines that go across the bottom, then bend upwards close to the right side.
Is there a way in CSS to draw a line like this?
You can create angled lines in CSS by using skew transforms (transform: skew(Xdeg)). Below is a sample snippet:
.shape {
height: 50px;
width: 200px;
border-bottom: 2px solid red;
border-right: 2px solid red;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="shape"></div>
Double line with one above the content area and one behind it can also be done using a single element (and a couple of pseudos) like in the below snippet:
.shape:before {
position: absolute;
bottom: -5px;
left: -5px;
content: '';
height: 50px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
.shape:after {
position: absolute;
content: '';
bottom: -10px;
left: 0px;
height: 55px;
width: 100%;
border-bottom: 3px solid red;
border-right: 4px solid red;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
}
.shape {
position: relative;
height: 80px;
width: 400px;
background: whitesmoke;
}
<div class="shape">
Some text that goes within the element...
</div>
So I was trying to make a skewed separation in CSS (only). It should look kind of like this here: http://i.stack.imgur.com/hVCa1.png
I tried it with CSS transforms already (transform: skew(-15deg);), but I don't think it'll work in all browsers, and it's not really adaptive. I thought about making it with linear gradients, but I'm not sure if this is any better.
Do you guys know of any better solution for this?
EDIT: here's the code:
.results {
width: 500px; }
.transf {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: grey !important;
width: 6px;
margin-left: -4px;
margin-right: -5px;
z-index: 1; }
.left_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: yellow;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
width: 10px;
margin-left: -15px;
z-index: 2; }
.right_border {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
-moz-transform: skew(-15deg);
-webkit-transform: skew(-15deg);
-o-transform: skew(-15deg);
-ms-transform: skew(-15deg);
transform: skew(-15deg);
background: orange;
border-left: 1px solid red;
border-top: 1px solid red;
border-bottom: 1px solid red;
width: 10px;
margin-right: -20px;
z-index: 2; }
.left {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: yellow;
width: 30%;
border: 1px solid green;
z-index: 0; }
.right {
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
/* Firefox */
display: inline-block;
background: orange;
width: 20%;
border: 1px solid red;
z-index: 0; }
.item21 {
width: 5%; }
.item22 {
width: 15%; }
and the HTML:
<div class="results">
<div class="left"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right"></div>
</div>
<div class="results">
<div class="left item21"></div>
<div class="left_border"></div>
<div class="transf"></div>
<div class="right_border"></div>
<div class="right item22"></div>
</div>
As you have pointed out, this can be done with CSS3 only, but not all browsers support it. For full browser support i'd use jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/UkAfD/26/
var skewed = false;
function skew() {
skewed = !skewed;
$('#box').css({
skewY: skewed ? '10deg' : '-10deg'
});
}
There are a few things you could do.
You could use transforms with a polyfill like CSSSandpaper to
make it cross browser compatible. Although, to get that type of
separation (with one side of the div being straight) you may have to
use skew AND perspective.
You could make a faux separator by using the before and after
pseudo classes with the CSS triangle trick. This, too, would
require a polyfill for pseudo classes like Selectivizr. You
would also have to play around with the border-width values to get
it to match what you are looking for.
You could use a PNG using the before/after pseudo classes.
You could use SVG to draw the borders around the containers.
Any of these would work, but its definitely not as easy as, say, rounded corners or drop shadows. You need to put in a little extra work to get those types of results.