I want to create something like this via CSS.
Just want to use only CSS to create this custom shape with border radius. Any ideas please?
You can overlap a few div tags and use the skew effect.
HTML
<div class="container">
<div class="shape shape1"></div>
<div class="shape shape2"></div>
<div class="shape shape3"></div>
</div>
CSS
.container {
position: relative;
padding: 30px;
}
.shape {
position: absolute;
text-align: center;
padding: 12px;
height: 60px;
width: 200px;
}
.shape:after {
border-radius: 5px;
content: '';
position: absolute;
height: 100%;
width: 100%;
background: green;
top: 0;
left: 0;
}
.shape1:after {
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
.shape2:after {
-webkit-transform: skew(0deg, -1deg);
-moz-transform: skew(0deg, -1deg);
-ms-transform: skew(0deg, -1deg);
-o-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
top: 4px;
left: 3px;
}
.shape3:after {
-webkit-transform: skew(3deg, -2deg);
-moz-transform: skew(2deg, -2deg);
-ms-transform: skew(2deg, -2deg);
-o-transform: skew(2deg, -2deg);
transform: skew(2deg, -2deg);
top: 2px;
left: -5px;
}
.set2 {
margin-top: 80px;
}
.set2 .shape2:after {
background: red;
}
.set2 .shape3:after {
background: blue;
}
Here's a jsFiddle
You may want to look into CSS3 2D Transforms. It's possible to do similar things, but there are limitations as well. I tried to do something similar to the referenced shape :)
// CSS
#shape {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
margin:30px;
}
#shape:after {
border-radius: 5px;
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background: green;
-webkit-transform: skew(-5deg, -3deg);
-moz-transform: skew(-5deg, -3deg);
-ms-transform: skew(-5deg, -3deg);
-o-transform: skew(-5deg, -3deg);
transform: skew(-5deg, -3deg);
}
// HTML
<div id="shape"></div>
Check the jsFiddle
Related
My code is this and I would like to know if there is any way to avoid repeating the elements and only change "rotate" which is what interests me.
I found online that you can use "Counter-increment" but I do not know how to implement it in my code
I use vuejs to not repeat 30 divs
<div class="wrapper">
<div class="circle-container">
<div class="circle" v-for="i in 30"></div>
</div>
</div>
.wrapper {
display: flex;
width: 100%;
height: 500px;
margin: 30px auto;
}
.circle-container {
margin: 60px;
position: relative;
width: 100%;
height: 100%;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
opacity: 0.7;
}
.circle:nth-child(1) {
-webkit-transform: rotate(0deg) translateX(500%);
-moz-transform: rotate(0deg) translateX(500%);
-ms-transform: rotate(0deg) translateX(500%);
-o-transform: rotate(0deg) translateX(500%);
transform: rotate(0deg) translateX(500%);
background: #42A5F5;
}
.circle:nth-child(2) {
-webkit-transform: rotate(12deg) translateX(500%);
-moz-transform: rotate(12deg) translateX(500%);
-ms-transform: rotate(12deg) translateX(500%);
-o-transform: rotate(12deg) translateX(500%);
transform: rotate(12deg) translateX(500%);
background: #ffe63d;
}
.circle:nth-child(3) {
-webkit-transform: rotate(24deg) translateX(500%);
-moz-transform: rotate(24deg) translateX(500%);
-ms-transform: rotate(24deg) translateX(500%);
-o-transform: rotate(24deg) translateX(500%);
transform: rotate(24deg) translateX(500%);
background: #ffe63d; }
Continue 30 times increasing 12deg
Using scss with #for:
See working code
See compile scss to css
.wrapper {
display: flex;
width: 100%;
height: 200px;
margin: 30px auto;
.circle-container {
margin: 60px;
position: relative;
width: 100%;
height: 100%;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
opacity: 0.7;
background: #ffe63d;
}
}
#for $i from 1 through 30 {
.circle:nth-child(#{$i}){
transform: rotate($i *12deg) translateX(500%);
}
}
You can consider a custom mixin:
#mixin transform-rotate-translate($degrees, $percentage) {
-webkit-transform: rotate($degrees) translateX($percentage);
-moz-transform: rotate($degrees) translateX($percentage);
-ms-transform: rotate($degrees) translateX($percentage);
-o-transform: rotate($degrees) translateX($percentage);
transform: rotate($degrees) translateX($percentage);
}
Now you can call it in any element:
.circle:nth-child(1) {
#include transform-rotate-translate(0deg, 500%);
}
.circle:nth-child(2) {
#include transform-rotate-translate(12deg, 500%);
}
.circle:nth-child(3) {
#include transform-rotate-translate(24deg, 500%);
}
Since your are using Vue.js to dynamically insert the div you can keep the CSS generic and rely on some inline style that you generate with the div. You can easily use a variable that you increment by 12deg for each div.
.wrapper {
display: flex;
width: 100%;
height: 200px;
margin: 30px auto;
}
.circle-container {
margin: 60px;
position: relative;
width: 100%;
height: 100%;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
opacity: 0.7;
transform: rotate(var(--d,0deg)) translateX(500%);
background: #ffe63d;
}
<div class="wrapper">
<div class="circle-container">
<div class="circle" ></div>
<div class="circle" style="--d:12deg"></div>
<div class="circle" style="--d:24deg"></div>
<div class="circle" style="--d:36deg"></div>
<div class="circle" style="--d:48deg"></div>
</div>
</div>
I'm not an expert with CSS and I'm gonna be struggled in order to achieve the following shape for my div:
And then I would like to insert text in the center.
How can I obtain this shape ?
Below here, some my attempts:
<div class="triangle-down-white" style="height:400px;">
try
</div>
and css
.triangle-down-white {
width: 100%;
height: 0;
padding-left:50%;
padding-top: 4%;
overflow: hidden;
background: rgba(140, 140, 140, 0.33);
}
.triangle-down-white:before,
.triangle-down-white:after {
content: "";
display: block;
height: 122px;
width: 122px;
margin-left:-1000px;
border-left: 1000px solid transparent;
border-right: 1000px solid transparent;
border-top: 100px solid rgba(140, 140, 140, 0.33);
}
.triangle-down-white:before
{ /* hide arrow tails background */
border-top: 100px solid white;
}
UPDATE
I added the new style chevron but the text appear behind the div. I'm using bootstrap and the html code is the following:
<div class="row">
<div class="col-sm-12" id="chevron">
<p>asdasdasdasasdaasdsadasadsadsasd</p>
</div>
</div>
The rest of the code is completely the standard one for bootstrap.
SOLVED
I added z-index: -1 at the new element.
Taken from this website here is the chevron shape you desire:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
p{
position: relative;
z-index: 1;
}
<div id="chevron"><p>Hello</p></div>
I have a small problem, I want to create 45 degree shadow for a picture. But if I use my code my object is rotating too. So I would like to ask for help with this problem.
My code:
.item {
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
Most flexible answer using only CSS is probably this:
.item {
position: relative; /* or absolute */
}
.item:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
box-shadow: -50px 80px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
You can do it using peudo-element (I've used arbitrary values, you need to tweak it yourself) :
.item {
margin-left: 50%;
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
.item:before {
z-index: -1;
position: absolute;
content: "";
display: block;
width: 100px;
height: 100px;
top: -30px;
left: 0;
background-color: transparent;
box-shadow: -50px 120px 4px 10px #555;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
<div class="item"></div>
This is my HTML code:
<style>
#myelement
{
position: relative;
overflow: hidden;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
border:#000000 solid 2px;
width:500px;
height:500px;
}
#myelement:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0%;
left: 0%;
z-index: -1;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
background: url(image.jpg) 0 0 no-repeat;
}
</style>
<div id="myelement"></div>
This is image.jpg file:
This is output of browser:
Here, background image is fixed and container is rotating. I want to make reverse. i,e Container will be fixed and background will rotate.
If I understood your question properly, you only need to apply transform: rotate on the pseudo-element which has the background and nothing on the container (like in the below snippet).
#myelement {
position: relative;
overflow: hidden;
border: #000000 solid 2px;
width: 100px;
height: 100px;
}
#myelement:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: -1;
transform: rotate(30deg);
background: url(http://i.stack.imgur.com/lndoe.jpg) 0 0 no-repeat;
}
<div id="myelement"></div>
I have the following code:
http://jsfiddle.net/cosoroaba/nCEwv/
HTML:
<div id="square">
<div class="corner-wrapper">
<div id="ctr"></div>
</div>
</div>
CSS:
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
.corner-wrapper{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
clip: rect(0px, 141.421px, 70.7107px, 0px);
height: 141.421px;
position: absolute;
right: -20.7107px;
top: -20.7107px;
width: 141.421px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 20.7107px;
top: 20.7107px;
background-color: blue;
display: block;
height: 100px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
I'm rotating the wrapper in one direction and the content in the opposite direction, then cutting the wrapper in half using clip, to achieve a "triangle"-div
which works well on FF,Chrome and Opera
but there is this issue in IE9 http://www.screenr.com/ikos
hover is triggered on the content in IE9 even if it would be hidden by the wrapper
I'd refactor your code, there's a lot of unnecessary transformations going on, and if you change the size of your container your have to recalculate everything. I haven't checked in IE9 but this should work:
<div id="square">
<div id="ctr"></div>
</div>
CSS
#square {
border: 1px solid #CCCCCC;
display: block;
height: 400px;
line-height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;
text-align: center;
width: 400px;
}
#ctr{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
right: 0;
top: 0;
background-color: blue;
display: block;
height: 150px;
position: absolute;
width: 100px;
}
#ctr:hover{
background-color: green;
}
#ctr:active{
background-color: red;
}
jsfiddle:
http://jsfiddle.net/exKJK/