Slanted div with rounded corners - css

How can I implement the following shape using CSS?
The right side should be slanted and the top corners should be rounded :

You can use pseudo-elements, border-radius and transform rotate to create the rounded edges and the oblique right part :
output : FIDDLE
div{
display:inline-block;
padding:1em 5em 1em;
position:relative;
overflow:hidden;
border-top-left-radius: 10px;
}
div:after{
content:"";
position:absolute;
top:0; left:0;
width:100%; height:100%;
background-color:#E70101;
z-index:-1;
border-top-right-radius: 15px;
-ms-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
-ms-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
transform-origin:100% 100%;
}
<div>Some text</div>

Another option is to use 3d perspective transform: http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/

Related

CSS: Absolute(?) positioning skewed element (no JS !important)

Is it possible to absolute position skewed element so its left-bottom corner stay close (0px) to container's border?
#one{
position:absolute;
background-color:darkkhaki;
width:800px;
height:200px;
left:50%;
transform: translateX(-50%)
}
#rect{
position:absolute;
background-color: salmon;
width:400px;
height:200px;
left:50%;
transform: translateX(-50%) skew(-25deg);
}
#marker{
position:absolute;
background-color:red;
width:5px;
height:200px;
left: 200px;
}
<div id="one">
<div id="rect"></div>
<div id="marker"></div>
<div>
I've marked with red line position of the rectangle side before skewing it. I'm looking for a way to position the rectangle, so its left-bottom corner touches the red line and no JS allowed.
I cannot simply use 'left: Ypx', because the whole thing is going to be keyframes-animated (changing skew, rotateX + constant perspective on outer element).
Otherwise, maybe you can suggest another way for making animation: the pictures that are slowly 'getting up' from laying-on-the-table position?
edit:
CODEPEN
You can use transform-origin Property.
For yours case i put <div id="marker"> inside <div id="rect"> and change transform-origin to 0% 100%.
Look at my example:
#one{
position:absolute;
background-color:darkkhaki;
width:800px;
height:200px;
left:50%;
transform: translateX(-50%)
}
#rect{
position:absolute;
background-color: salmon;
width:400px;
height:200px;
left:50%;
transform: translateX(-50%) skew(-25deg);
}
#marker{
position:absolute;
background-color:red;
width:5px;
height:200px;
top: 0px;
left: 0px;
transform: skew(25deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
<div id="one">
<div id="rect">
<div id="marker"></div>
</div>
<div>
And this Working Fiddle

Center div while transition runs looks choppy

I have a div with an inner span with text. This inside span should be centered vertically and horizontally all the time:
http://jsfiddle.net/QW4Wk/
<div>
<span>Text aligned center</span>
</div>
The div has a transition when the mouse is over, which changes its width and height.
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
bottom:0;
right:0;
}
div:hover{
width:250px;
height:250px;
}
However in Chrome (at least) the text looks choppy while the transition is running. I guess this is because the transition goes 1 by 1px and therefor the "center style" has to go back and forward 1px.
Is there someway to fix this to look smoother, something like subpixel?
Thanks.
try this for absolute centering the text..
span {
margin: auto;
color:white;
text-align:center;
height:10px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
and of course lessen your transition speed.
Apply a different change to the span. a transform can be subpixel
div{
width:200px;
height:200px;
background:black;
position:relative;
-webkit-transition:width 10s,height 10s;
}
span {
position:absolute;
color:white;
top:75px;
left:50px;
width: 100px;
transition: -webkit-transform 10s;
-webkit-transform: translate(0px, 0px);
}
div:hover{
width:250px;
height:250px;
}
div:hover span {
-webkit-transform: perspective(999px) translate(25px, 25px);
}
fiddle

Positioning rotated element on right side of page

JSBin demo here.
How can I position a div rotated 90 degrees on the right edge of the page, centered vertically? Thanks in advance.
Try this:
div {
font-family: sans-serif;
background: red;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
position: absolute;
width:200px;
height:20px;
top:50%;
margin-top:-20px; /* height */
right:-200px; /* width */
} ​ ​​
div{
vertical-align:middle;
float:right;
/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Check this, may help you a bit.

Drawing a cuboid with CSS

I'm trying to draw a cuboid with css (like this http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png but ONLY 3 visible faces needed)
Lots of stuff checked, but nothing found exactly :S
Can anyone help?
SOLVED. The code is:
<style>
#cubetop {
width: 200px;
height: 40px;
background: green;
-webkit-transform:
translateX(20px)
skew(-45deg, 0deg);
}
#cubeface {
width: 200px;
height: 60px;
background: yellow;
display:block;
float:left;
}
#cuberight {
width: 40px;
height: 60px;
background: navy;
display:block;
float:left;
-webkit-transform:
translateY(-20px)
skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>​
If you're ok with css3, you can use transforms. Have 3 separate div elements and apply the transformations on each.
Something like this in Mozilla
-moz-transform: rotate(15deg)
translateX(230px)
scale(1.5);
And Like this in IE
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
Alternatively try :
http://www.useragentman.com/tests/cssSandpaper/cube3.html

How to make a angled arrow like this with gradient and transparent?

How to make a angled arrow like this with gradient and transparent?
I made a block with gradient here. need help to convert into arrow.
http://jsfiddle.net/jitendravyas/aZ65c/2/
I need a compatible with ie8 compatibility
#jitendar; check this out i make it with pure css:
.button {width:70px;
height:140px;
overflow:hidden;
}
.button:after {
content:"";
width:100px;
height:100px;
background: linear-gradient(left top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
margin-top:20px;
margin-left:25px;
}
Check the fiddle http://jsfiddle.net/sandeep/aZ65c/7/

Resources