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>
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'm trying to get the toggle to move it 100% to the right. As I'm trying to make it responsive, I can't set it to move an xx amount of pixels.
Can you please help?
input:checked + .slider:before {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
https://jsfiddle.net/Lc1tdhgb/1/
Thanks
setTimeout(function() {
document.getElementById('togBtn').checked = true;
}, 1000)
#toggle {
width: 100%;
height: 100%;
position: relative;
}
.switch {
position: absolute;
display: inline-block;
width: 100%;
/*min-height: 32px;*/
height: auto;
top: 0;
}
.switch input {
display: none;
}
.slider {
cursor: pointer;
background-color: #ca2222;
-webkit-transition: .5s;
transition: .5s;
border-radius: 32px;
padding: 12px 0;
}
.slider:before {
position: absolute;
content: "";
height: 1.1em;
width: 1.1em;
left: 3px;
bottom: 3px;
background-color: white;
-webkit-transition: .5s;
transition: .5s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #3eab37;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
left: calc(100% - 20px);
/*-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);*/
}
/*------ ADDED CSS ---------*/
.slider:after {
content: 'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 0.7em;
font-family: Roboto, sans-serif;
}
input:checked+.slider:after {
content: 'ON';
}
/*--------- END --------*/
<div id="toggle">
<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>
</div>
Well, just make sure that the container of the elements follow a position: relative;, so the wrapper have the restrains for the absolute elements inside of it. Then, right is actually how far from right you want the element to be, in this case, you could've used either right: 0%; or left: 100%; although you've encountered the error in the fact that you'd be ignoring margins from the parent's style. That's why I added left: calc(100% - 20px); (20px was on trial and error, until I got it aligned with the outter border of the switch!), then now it works as wanted. Glad to help :)
I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners?
JSFiddle
Thank you
You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself):
div {
position: relative;
height: 200px;
width: 80vw;
margin: 10vw;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 90%;
width: 100%;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
background: gray;
z-index: -1;
}
div:before {
content: "";
position: absolute;
height: 90%;
width: 100%;
left: 0;
bottom: -20%;
background: gray;
-webkit-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
transform: skewY(-5deg);
z-index: -1;
}
html {
background: url(http://placekitten.com/g/300/300);
}
<div>Content!!</div>
I would like to know if it's possible to recreate the following image using css.
I am currently using it but in svg format.
Imagine this:
jsfiddle link
#circle {
background: #ccc;
border-radius: 50%;
/* Change these two equally to change circle size. Can be pixels, too. */
width: 25%;
padding-top: 25%;
height: 0;
position: relative;
}
.hand {
background: black;
width: 1px;
height: 100%;
position: absolute;
left: 50%;
top: 0;
}
.hand:nth-child(2) {
transform: rotate(90deg);
}
.hand:nth-child(3) {
transform: rotate(45deg);
}
.hand:nth-child(4) {
transform: rotate(135deg);
}
#circle:after {
content: '';
display: block;
width: 80%;
height: 80%;
border-radius: 50%;
background: white;
position: absolute;
top: 10%;
left: 10%;
}
<div id="circle">
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
<div class="hand"></div>
</div>
Or if you need the middle to be transparent (this is a little hacky, and you may have to modify it to fit your exact needs): https://jsfiddle.net/wdoe8r3m/1/
Well, all i am trying to do is getting 7 circle icons around the top part of a half-circle. Here's a demo with only first 3 icons placed in order: http://jsfiddle.net/yxVkk/15/
That's how icon positioning is done now:
.one {
left: -35px;
top: 30px;
}
I found this way pretty complicated to arrange all icons this way and i thought there has got to be a better way of doing it.
I tried this method but it just didn't work: http://dabblet.com/gist/3864650
Is there any other way of doing it?
The method from your link works perfectly.
jsFiddle
CSS
.circle-big {
position: relative;
height:180px;
width:180px;
padding: 21px;
border-radius: 50% 50%;
margin: 100px;
}
.circle-big:before {
position: absolute;
height: 90px;
width: 180px;
border-radius: 90px 90px 0 0 ;
background: green;
content: "";
}
.circle {
border-radius: 50%;
width: 30px;
height: 30px;
background-color: red;
display: block;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin: -15px;
}
.one { transform: rotate(-30deg) translate(130px); }
.two { transform: rotate(-50deg) translate(130px); }
.three { transform: rotate(-70deg) translate(130px); }
.four { transform: rotate(-90deg) translate(130px); }
.five { transform: rotate(-110deg) translate(130px); }
.six { transform: rotate(-130deg) translate(130px); }
.seven { transform: rotate(-150deg) translate(130px); }
Hope it's what you expected.
If you want to increase the distance between the big circle and the small ones just increase the translation.