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>
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 am learning css and working on a project where I need to display a rounded ribbon at the bottom right corner of the web page along with icon and text in it. Below is the screenshot of the design that I am trying to achieve..
So far I am able to display the ribbon but unable to keep the icon and text normal. Here is the link to Codepen: https://codepen.io/stephen0roper/pen/JeKdJV
CSS Code:
/* The ribbons */
.corner-ribbon{
font-weight: bold;
width: 50px;
background: #e43;
position: absolute;
bottom: 5px;
right: -30px;
text-align: left;
line-height: 100px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
border-radius: 65px;
}
/* Custom styles */
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
bottom: -50px;
right: -100px;
transform: rotate(-270deg);
-webkit-transform: rotate(-315deg);
background-color: red;
width: 226px;
height: 125px;
}
.corner-ribbon.red{background: #e43;}
Hi this is how I solved this puzzle:
1 remove the line-height:100px; in .corner-ribbon class
2 wrap the text and icon into a div and add a class"stop-rotate", and justneed to rotate it back 45deg:
.stop-rotate{
display:inline;
padding-top:30px;
float:left;
transform: rotate(-45deg);
text-align:center;
}
3 edit the html tags, and change the icon to fa-2x
<div class="corner-ribbon top-left sticky red shadow">
<div class="stop-rotate">Some text
<i class="fas fa-camera fa-2x" style="display:block"></i>
</div>
</div>
I have saved the Pen(for those who may need: https://codepen.io/anon/pen/OaRpOd ),you may still see the result and may need to edit the size a little bit.
Hope this helps.:)
please look at this:
https://codepen.io/anon/pen/aQmJjy?editors=1100
/* The ribbons */
.corner-ribbon {
font-weight: bold;
width: 50px;
background: #e43;
position: absolute;
bottom: 5px;
right: -30px;
text-align: center;
line-height: 40px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
border-radius: 65px;
}
/* Custom styles */
.corner-ribbon.sticky {
position: fixed;
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
/* Different positions */
.corner-ribbon.top-left {
bottom: -50px;
right: -100px;
transform: rotate(-270deg);
-webkit-transform: rotate(-315deg);
background-color: red;
width: 226px;
height: 125px;
}
.corner-ribbon.red {
background: #e43;
}
.rotate-text {
transform: rotate(270deg);
-webkit-transform: rotate(315deg);
position: absolute;
left: 15px;
top: 0;
font-family: sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
item-align: center;
height: 120px;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<div class="corner-ribbon top-left sticky red shadow">
<div class="rotate-text">
<span>Some text</span>
<i class="fas fa-camera fa-2x"></i>
</div>
</div>
I've created a responsive CSS3 triangle using the following guide.
GUIDE
The problem I now face is that I want to decrease its height. So it's not a 90-degree triangle but rather, I want to adjust its height to for example 30 pixels whilst maintaining a skewed triangle shape as well as it's responsiveness.
Here is what I have so far:
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: rotate(45deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I tried experimenting with the perspective transform but with no luck.
You can scale the element to whatever ratio you want. I've compressed the triangle in my code by 2. Just use transform: scale(1, 0.5) rotate(45deg);
Note: The order of transformations will do matter. The result of
transform: rotate(45deg) scale(1, 0.5); is different from transform: scale(1, 0.5) rotate(45deg);
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: scale(1, 0.5) rotate(45deg)
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
Answer by spooky daimon is way more intuitive, go for that one. Just to show the possibilities, you can also skew the pseudo element and adapt rotation as well as translation.
p {
margin: 0;
}
body {
background: black;
}
.container {
width: 50%;
margin: 0 auto;
}
.item {
background: white;
}
.tr {
overflow: hidden;
width: 100%;
position: relative;
padding-bottom: 100%;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height: 100%;
background: white;
transform-origin: top right;
transform: translate(25%) rotate(30deg) skew(-30deg);
}
<div class="container">
<div class="item">
<h1>Some Content</h1>
<p>Dummy Content</p>
</div>
<div class="tr"></div>
</div>
I have Created diamond successfully by using following code
CSS:
.diamond {
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
<div class="diamond" style="background-color:#ff4d4d">48</div>
produced output by above code has tilted text,
but I want to make text horizontally. I tried but failed.
Could any one please tell me how to achieve this.
<div class="diamond" style="background-color:#ff4d4d">
<div class="text-inside-diamond">48</div>
</div>
.text-inside-diamond {
transform: rotate(-45deg);
margin-left: 10%;
}
the margin-left of the inside class is just to center the div
your diamond class stays the way it is.
.diamond {
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
.content{
transform: rotate(-45deg);
}
<div class="diamond" style="background-color:#ff4d4d">
<div class="content">
48
</div>
</div>
or you can make absolute position of div to make that happen, also can be done by z index in css
.diamond {
position: absolute;
height: 75px;
width: 75px;
border-radius:15px;
transform: rotate(45deg);
float: left;
margin-left: 18%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
.content{
position: absolute;
height: 75px;
width: 75px;
border-radius:15px;
float: left;
margin-left: 20%;
font-size:50px;
color: white;
font-family:Adequate-ExtraLight;
}
<div>
<div class="diamond" style="background-color:#ff4d4d">
</div>
<div class="content">
48
</div>
</div>
To create this effect:
It is possible or would I need to design it with software?
You could use gradient as background
div {
background: -moz-linear-gradient(-45deg, #1e5799 50%, #207cca 50%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#207cca), color-stop(100%,#7db9e8));
...
}
An example : http://jsfiddle.net/w9fYj/
You can do it with triangles (which basically works on border adjustments) How do CSS triangles work?
And other shapes for more
Here is extensive example with transforms of many divisions which may interest you.
Demo
HTML
<div class="wrapper">
<div class="shape3">
<div class="shape3-content">Hi there!</div>
</div>
<div class="shape1">
<div class="shape1-content">Hi there!</div>
</div>
<div class="shape2">
<div class="shape2-content">Hi there!</div>
</div>
</div>
css
.wrapper {
border: 1px solid #ff8888;
height: 480px;
left: 50%;
margin: -240px 0 0 -320px;
overflow: hidden;
position: absolute;
top: 50%;
width: 640px;
}
.shape1 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid black;
height: 50%;
left: -25%;
position: absolute;
top: 70%;
width: 150%;
}
.shape1-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
padding-left: 230px;
}
.shape2 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
background-color: #fff;
border: 1px solid #88ff88;
bottom: 244px;
height: 100%;
position: absolute;
right: 50%;
width: 100%;
}
.shape2-content {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
bottom: 10px;
position: absolute;
right: 10px;
}
.shape3 {
background:red;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
border: 1px solid #8888ff;
bottom: 40%;
height: 100%;
position: absolute;
right: 20%;
width: 100%;
}
.shape3-content {
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
bottom: 50%;
position: absolute;
right: 10px;
}
Here it is using pure CSS:
HTML
<div id="test">
</div>
CSS
#test {
widh:300px;
height:150px;
background:#C3C3C3;
position:relative;
overflow:hidden;
}
#test:after {
content:'';
position:absolute;
right:-100px;
top:10px;
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
width:500px;
height:250px;
background:#880015;
}
And here is a FIDDLE
If you consider to support old browsers without using CSS3 then:
HTML
<div class="wrapper">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS
.wrapper {
width: 400px;
height: 100px;
}
.left {
display: inline;
float: left;
background-color: #ccc;
width: 100px;
height: 100px;
}
.right {
display: inline;
float: right;
background-color: #610A0A;
width: 200px;
height: 100px;
}
.middle {
float:left;
display: inline;
line-height: 0%;
width: 0px;
border-top: 100px solid #ccc;
border-right: 100px solid #610A0A;
}
Fiddle Demo