I want to build a box with CSS3. The dimension shall be given in percentage. How do I calculate the right values for the position and dimension for the parts of the box that have a skew of 45deg. Somehow the parts do not fit together, the parts overlap, are to short or too long.
jsFiddle
HTML
<div class="wrap">
<div class="back"></div>
<div class="front"></div>
</div>
CSS
.wrap {
margin:100px;
width: 400px;
height:1600px;
position: relative;
}
.back {
position: absolute;
left:0%;
width: 100%;
height: 100%;
background: red;
}
.back:before {
content:"";
position: absolute;
width:25%;
height:100%;
left:-24%;
top: 3%;
background:black;
transform: skew(0, -45deg);
}
.back:after {
content:"";
position: absolute;
width:100%;
height:6%;
left:-12%;
top: 0%;
background:rgba(111, 111, 255, 0.6);
transform: skew(-45deg);
}
You mean something like this?
http://jsfiddle.net/ZqpZ7/7/
.back:before{
content:"";
position: absolute;
width:25%;
height:100%;
left:-25%;
top: 2%;
margin-top:18px;
background:black;
-webkit-transform: skew(0,-45deg);
-moz-transform: skew(0,-45deg);
-o-transform: skew(0,-45deg);
-ms-transform: skew(0,-45deg);
transform: skew(0,-45deg);
}
.back:after{
z-index:10;
content:"";
position: absolute;
width:101%;
height:6%;
left:-12%;
top: 0%;
background:rgba(111,111,255,0.6);
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-o-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
}
.right{
position: absolute;
right:0%;
width: 100%;
height: 100%;
background: red;
}
.right:before{
content:"";
position: absolute;
width:25%;
height:100%;
right:0%;
top: 3%;
margin-top: 2px;
background:black;
-webkit-transform: skew(0,-45deg);
-moz-transform: skew(0,-45deg);
-o-transform: skew(0,-45deg);
-ms-transform: skew(0,-45deg);
transform: skew(0,-45deg);
}
Related
A status bar made with a number of divs, Each has text status in the middle.
Generated the chevron shape with CSS, Shape made with joining two parallelograms. How I can add a text in the middle of each chevron.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: #009999;
color: white;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: #009999;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
You should consider using clip-path in combination with a negative right margin instead of your transform: skew() approach. You would have way less code and the result is the same:
.chevron {
display: inline-block;
min-width: 150px;
text-align: center;
padding: 15px 0;
margin-right: -30px;
background: #009999;
-webkit-clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%);
clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%, 20% 50%);
}
<div class="chevron">Text here</div>
<div class="chevron">Text here</div>
<div class="chevron">Text here</div>
Give z-index to :before , :after
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
text-align:center;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: #009999;
color: white;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
z-index:-1;
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: #009999;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
z-index:-1;
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
You need to add z-index:-1 to the .chevron:before and .chevron:after:
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px;
height:20px;
width: 200px;
margin-top:30px;
text-align:center;
}
.chevron:before {
top: 0;
-webkit-transform: skew(60deg, 0deg);
-moz-transform: skew(60deg, 0deg);
-ms-transform: skew(60deg, 0deg);
-o-transform: skew(60deg, 0deg);
transform: skew(60deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-60deg, 0deg);
-moz-transform: skew(-60deg, 0deg);
-ms-transform: skew(-60deg, 0deg);
-o-transform: skew(-60deg, 0deg);
transform: skew(-60deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #009999;
}
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
<div class="chevron"> Text here</div>
When I run this animation on Safari, there is a unwanted offset between wrapper and target, which should be at the center of wrapper. This code work well on others browsers including IE.
A strange thing is that the position of the target in developer tool is correct, but it just rendered with offset.
Here is the screenshot.
Is there any hack to take over this problem?
My safari version: 10.1.1
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: absolute;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-animation: flip 2s;
animation: flip 2s;
}
#-webkit-keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(-50%,0) rotateX(0deg);
transform: translate(-50%,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(-50%,0) rotateX(360deg);
transform: translate(-50%,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
Thanks for any help!
.wrapper{
height: 200px;
width: 200px;
background-color: red;
position: relative;
margin: 0 auto;
}
.target{
height: 250px;
width: 250px;
background-color: blue;
position: absolute;
left: -30px;
right: 0;
-webkit-animation: flip 2s;
animation: flip 2s;
}
#keyframes flip{
0%{
height: 120px;
width: 120px;
top: 100%;
-webkit-transform: translate(60px,0) rotateX(0deg);
transform: translate(60px,0) rotateX(0deg);
}
100%{
height: 250px;
width: 250px;
top: 0;
-webkit-transform: translate(0px,0) rotateX(360deg);
transform: translate(0px,0) rotateX(360deg);
}
}
<div class="wrapper">
<div class="target"></div>
</div>
u can try this code..
I have a shape which is a heart and I have a number inside. The problem is that I can have a number with 1 digit and a number with 2 digit and I am not able to center them into the heart.
https://jsfiddle.net/b7ggddqy/
.description{
position:relative;
height:100px;
}
.heart{
z-index:-500;
position: absolute;
top:70%;
right:20%;
width: 30px;
height: 30px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background-color: #BF4139;
}
.heart:before,
.heart:after{
position: absolute;
width: 30px;
height: 30px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: #BF4139;
}
.heart:before{
bottom: 0px;
left: -15px;
}
.heart:after{
top: -15px;
right: 0px;
}
.heart p{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
z-index: 800;
left:10px;
top:-15px;
font-size:18px;
color:white;}
<div class="description">
<div class="heart">
<p>11</p>
</div>
</div>
<div class="description">
<div class="heart">
<p>3</p>
</div>
</div>
Just give a width to the paragraph and text-align:center
.heart p {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position:absolute;
z-index: 800;
left:3px;
top:0px;
font-size:18px;
color:white;
width:20px;
text-align:center;
}
Demo: https://jsfiddle.net/lotusgodkk/b7ggddqy/3/
Set p width to 100% and text-align:center.
Is this what you are looking for?
.heart p{
position:absolute;
text-align:center;
width:20px;
margin-left:-13px;
}
JSFiddle
Can someone explain why my purple box overlaps my yellow box in this demo?
I'd like my yellow box to appear first & then my purple box to be 10px below it.
Demo: http://jsfiddle.net/t0x0y7ax/
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
Personally, I would just transform the container...it makes it much easier all round
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top:50%;
left:0;
border:1px solid red;
transform-origin:top left;
transform: rotate(-90deg) translate(-100%, 0%);
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
It is because of the rotation as the commentator specified. You can float them to get them to show up next to each other - http://jsfiddle.net/t0x0y7ax/2/.
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
float: left;
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
float: left;
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Updated Fiddle - http://jsfiddle.net/t0x0y7ax/12/
I want to align a text vertically(That is 270 degree) and in the vertical middle of an image. This is what i actually want
I tried with CSS 'transform' property but its not working for me. Here i tried the code . And the HTML and CSS code i tried is
HTML :
<div id="img-container">
<label id="lblConfidence">Confidence</label>
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
CSS :
#img-container{
margin: 0 auto;
padding:0;
}
#image{
border:5px solid red;
margin-left:50px;
width:10px;
height:100px;
}
#lblConfidence{
vertical-align:middle;
transform:rotate(270deg) ;
-ms-transform:rotate(270deg) ; /* IE 9 */
-transform:rotate(270deg) ; /* Opera, Chrome, and Safari */
}
#lblLow{
margin-left:48px;
}
#lblHigh{
margin-left:48px;
}
Here's a solution that relies on pseudo-elements and thus uses minimal markup: http://jsfiddle.net/C49q7/1/. A particular emphasis has been placed on the alignment of elements. The #image element can be moved anywhere. The labels follow it precisely.
HTML:
<div id="image"><span></span></div>
CSS:
#image {
border:5px solid red;
width:100px;
height:20px;
text-align: center;
box-sizing: border-box;
position: relative;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
margin-top: 100px;
}
#image:before {
content: "Conidence";
position: absolute;
top: -24px;
left: 0;
right: 0;
text-align: center;
}
#image > span:before {
content: "High";
position: absolute;
right: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
#image > span:after {
content: "Low";
position: absolute;
left: -25px;
font-size: 10px;
top: 50%;
-webkit-transform: translateY(-50%) rotate(90deg);
transform: translateY(-50%) rotate(90deg);
}
add css to container.
#img-container {
position: relative;
}
add css to label.
#lblConfidence {
position: absolute;
top: 50%; -moz-transform:
rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
Here only given a style for align the label 50%. But it is depending on the length of the label. if this label is dynamic, please use a javascript to set the " top: 50%" style. and change the value relatively to the length of label.
Please replace lable with div and use below CSS for lblConfidence :
#lblConfidence
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
writing-mode: tb-rl; /* IE 8 */
filter: flipv fliph; /* IE 8 */
margin-top: 100px;
width: 200px;
text-align: center;
height: 50px;
background:#ccc;
}
you can refer this solution : http://jsbin.com/joqofu/3
<div class="container">
<div class="left"><label>Confidence</label></div>
<div class="right">
<label id="lblHigh">High</label>
<div id="image"></div>
<label id="lblLow">Low</label>
</div>
</div>
and css
.container{
position:relative;
}
#image{
border:5px solid red;
width:10px;
height:100px;
}
.left {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display:block;
height:120px;
width:100px;
text-align:left;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.right{
margin-left:10px;
float:left;
text-align:left;
}