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!
Related
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;
}
I'm using a pseudo-element of content to make a triangle that I want floating outside the upper
Setup of problem: Get the blue triangle on this fiddle to be wider (but keep its height)
.bluebox { margin-top: 50px; background: blue; min-width: 300px; min-height: 200px; position: relative;}
.bluebox:after { content: "\25B2"; color: blue; position: absolute; font-size: 2em; top: -0.8em; left: 5%;}
What attribute to I need to tweak in order to do that?
If supporting IE8 and below is not a concern, you could apply scaleX() transform function with to the pseudo-element.
For instance (Vendor prefixes omitted due to brevity):
.bluebox:after {
/* other declarations... */
content: "\25B2";
transform: scaleX(1.5);
}
Online Example:
.bluebox {
margin-top: 50px;
background: blue;
min-width: 300px;
min-height: 200px;
position: relative;
}
.bluebox:after {
content: "\25B2";
color: blue;
position: absolute;
font-size: 2em;
top: -0.8em; left: 5%;
-webkit-transform: scaleX(1.5);
-moz-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
transform: scaleX(1.5);
}
<div class="bluebox"></div>
I have a number of divs generated with different heights in %. I want the divs to stand on the bottom line of the black container. How can I do this? If I make them absolute positioned with bottom: 0, they will overlap each other.
This is the sort of thing flexbox was developed for if you can afford to ignore IE9 and below...
HTML
<div class="container">
<div class="box">50%</div>
<div class="box">25%</div>
<div class="box">25%</div>
</div>
CSS
.container {
height: 100vh;
background: #000;
display: flex;
align-items: flex-end;
}
.box {
height: 25%;
width: 10em;
margin-right: 1em;
background-color: red;
}
.box:first-child {
height: 50%;
}
I only know one way at the moment and it involves flipping things vertically: http://jsfiddle.net/86c9gbvu/
It's based on using CSS transforms (which is supported).
#container {
width: 500px;
height: 500px;
background: black;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
#bar-one {
width: 50px;
height: 50%;
background: red;
display: inline-block;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
#bar-two {
width: 50px;
height: 25%;
background: red;
display: inline-block;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
#bar-three {
width: 50px;
height: 25%;
background: red;
display: inline-block;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
<div id="container">
<div id="bar-one">50%</div>
<div id="bar-two">25%</div>
<div id="bar-three">25%</div>
</div>
Depending on your particular situation, you may probably work around this issue with margin-top and vertical-align, see this jsfiddle. Important is that the sum of margin-top and height should sum up to 100%.
HTML:
<div class="container">
<div class="first">f</div>
<div class="second">s</div>
<div class="third">t</div>
</div>
CSS:
.container {
width: 200px;
height: 200px;
background-color: black;
}
.first, .second, .third {
display: inline-block;
width: 50px;
background-color: red;
vertical-align: bottom;
}
.first {
height: 75%;
margin-top: 25%;
}
.second {
height: 50%;
}
.third {
height: 25%;
}
HTML:
<div class="wrap">
<div class="bars one">one</div>
<div class="bars two">two</div>
<div class="bars three">three</div>
</div>
CSS:
html
{
height: 100%;
}
body
{
margin: 0;
background: #000;
height: 100%;
}
.wrap
{
width: 40%;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
}
.bars
{
width: 10%;
position: absolute;
bottom: 0;
background: red;
}
.one
{
height: 50%;
left: 0;
}
.two
{
left: 15%;
}
.three
{
left: 30%;
}
.two, .three
{
height: 25%;
}
fiddle: http://jsfiddle.net/pj7knkup/5/
no css3 (full browsers support).
One Simple solution is just transform(rotate) the wrapper div 180 deg and set all inner divs to float right.
css:
.wrapper-div{
float: right;
position: relative;
transform: rotate(180deg);
}
How can I vertically stack more than one element when using rotate without having to resort to statically fixing the spacing (in my case using pixel-width from bottom) between the elements?
Here's my current HTML and CSS/SASS:
HTML:
<div class="results-indicator-container">
<div class="results-indicator-label-won">5x</div>
<div class="results-indicator-label-lost">5x</div>
<div class="results-indicator-label-tied">5x</div>
</div>
CSS/SASS:
.results-indicator-container {
bottom: 51px;
height: 59px;
left: 167px;
position: relative;
width: 16px;
font-size: 12px;
float: left;
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position: absolute;
bottom: 0px;
}
.results-indicator-label-won {
#extend .results-indicator-label;
}
.results-indicator-label-lost {
#extend .results-indicator-label;
bottom: 25px;
}
.results-indicator-label-tied {
#extend .results-indicator-label;
bottom: 50px;
}
}
Here's a screenshot of what my vertically stacked elements currently look like.
here is a jsFiddle,
please let me know what you think.
.results-indicator-container {
height: 59px;
left: 167px;
width: 16px;
font-size: 12px;
float: left;
}
.results-indicator-label {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
float:left;
clear:left;
height:20px;
width:20px;
border-bottom: 1px solid #CCC;
}
.won{
}
.lost{
}
.tied{
}
<div class="results-indicator-container">
<div class="results-indicator-label won">5x</div>
<div class="results-indicator-label lost">5x</div>
<div class="results-indicator-label tied">5x</div>
</div>
It is a curved div basically:
So it is possible to do with just CSS and no images?
Well... I was the biggest skeptic of this shape, but it seems it is possible O_o
Demo
HTML
<div class="shape one"></div>
<div class="shape two"></div>
<div class="shape three"></div>
CSS
.shape
{
background:red;
float:left;
}
.one
{
border-width:0px;
border-bottom:10px solid red;
border-left:200px solid #fff;
width:0px;
}
.two
{
width:200px;
height:40px;
clear:left;
}
.three
{
border-width:0px;
border-top:50px solid red;
border-right:10px solid #fff;
width:0px;
margin-top:-10px;
}
The border method looks grainy in the browsers I tested. Here's a method using the ::before and ::after pseudo-elements and CSS transform: skew() that looks smoother. You can adjust the angles as needed. This uses only one <div>.
Demo:
Output:
HTML:
<div class="quadrilateral"></div>
CSS:
.quadrilateral {
background-color: red;
height: 50px;
margin: 50px;
position: relative;
width: 300px;
}
.quadrilateral::before {
background-color: red;
content: '';
display: inline-block;
height: 61px;
position: absolute;
right: -3px;
top: -11px;
transform: skewX( -5deg );
-ms-transform: skewX( -5deg );
-webkit-transform: skewX( -5deg );
-o-transform: skewX( -5deg );
-moz-transform: skewX( -5deg );
width: 10px;
}
.quadrilateral::after {
background-color: red;
content: '';
display: inline-block;
height: 15px;
position: absolute;
top: -6px;
transform: skewY( -2deg );
-ms-transform: skewY( -2deg );
-webkit-transform: skewY( -2deg );
-o-transform: skewY( -2deg );
-moz-transform: skewY( -2deg );
width: 300px;
}
Instead of CSS, consider using SVG. It's supported in all major browsers and that shape would be very very small in SVG format. It also would be in your DOM tree so you could bind events on it.