How can I deactivate the top DIV so that I can select what's under it?
Check what I did here:
http://jsfiddle.net/zE5Ze/2/
#triangle_w {
width: 1000px;
height: 178px;
overflow: hidden;
position: fixed;
left: -24px;
top: -82px;
/*outline: 1px solid pink;*/
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
#triangle {
width: 961px;
height: 176px;
background: url('http://i.imgur.com/FTGa2.png') no-repeat;
position: absolute;
left: 10px;
bottom: -80px;
/*outline: 1px solid red;*/
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
#triangle #menu {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
/*outline: 1px solid red;*/
}
Without the rotation: http://jsfiddle.net/zE5Ze/5/
As you can see, the areas inside the red outline are not selectable.
Is there a way to do this without having to fiddle with CSS rotations?
I'd like to deactivate the triangle, and leave only the menu and the thumbs active.
Simple. Give a z-index.
#triangle #menu a {z-index: 5;}
Fiddle: http://jsfiddle.net/zE5Ze/3/
Or set a width!
#triangle_w {width: 100px;}
Fiddle: http://jsfiddle.net/zE5Ze/4/
Related
Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.
This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
I'm trying to create a div with relative height and width, in which are three boxes, being diagonally aligned and also fill the complete space of the relative parent div.
It's kinda tough for me to explain, so here's a picture on how I mean it: http://i.imgur.com/s2uSTVU.png
Besides the little space between the red lines all the space should be covered by the diagonal boxes.
Is that possible somehow? I'm very grateful for every advice or tip someone can shoot me!
Following code is what I got so far. The problem now where I'm stuck is how to make the diagonal divs fill out the complete space around them.
<div class="parent">
<div class="box-1">box1</div>
<div class="box-2">box2</div>
<div class="box-3">box3</div>
</div>
CSS:
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }
Greetings, Toumazi!
You could try that: fiddle
.parent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.parent > div {
background: #c1c1c1;
}
.box-1 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-2 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
margin: 0px 0px 10px 0px;
height: 33.33%; }
.box-3 {
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
width: 100%;
height: 33.33%; }
I would like to make a diamond shape with a image background. I can do it, the only problem is the image seems to rotate at the same time which i do not want. This also needs to work in ie8
fiddle:http://jsfiddle.net/zangief007/2bft2rcx/1/
#diamond {
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Try removing the rotation and adding
#diamond:before, #diamond:after{
content: '';
border: 80px solid transparent;
position: absolute;
top: 50%;
margin-top: -80px;
z-index: -1;
}
#diamond:before {
border-right-color: #ccc;
border-left: none;
right: 50%;
}
#diamond:after {
border-left-color: #ccc;
border-right: none;
left: 50%;
}
Demo
I'm trying to achieve this shape in css, tried in several different ways, checked online for examples but looks like this shape is kind of tricky to accomplish.
Anyone that could have an idea of how to do this? Not sure if it's even possible with css only technique.
Thank you!
Yes, it is possible and it's very simple.
demo
Result:
:
I'm using just one element and a pseudo for the bottom left corner so the HTML is simply:
<div class='shape'></div>
Relevant CSS:
.shape {
overflow: hidden; /* to hide the top right corner
of the parallelogram formed by the pseudo */
position: relative;
width: 20em; height: 10em; /* any values really */
}
.shape:before {
position: absolute;
bottom: 0; left: 0;
width: 150%; height: 150%;
transform-origin: 0 100%;
transform: rotate(-3deg) skewX(-10deg);
background: black;
content: '';
}
You can get a lot of shapes using CSS transforms. And they are real shapes, you can have any kind of background behind.
I think it is perfect solution to your question...
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 5px solid transparent;
padding: 10 8px 5 5;
}
You could also use :before, :after pseudo and transform property. Here's an example.
#box {
width: 400px;
height: 200px;
background-color: #212121;
position: relative;
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 411px;
height: 45px;
background: white;
position: absolute;
bottom: -20px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#box:before {
bottom: 80px;
left: -200px;
-moz-transform: rotate(92deg);
-webkit-transform: rotate(92deg);
-o-transform: rotate(92deg);
-ms-transform: rotate(92deg);
transform: rotate(92deg);
}
You may have to change some values to get the shape you want.
What I am trying to do was keeping an anchor in my html which should be triangular shape and should be able to click only in that triangular portion but I am not supposed to use image map can anyone please suggest me a solution
Note : I know about CSS shapes but they are clickable in complete block. I just want it to be clickable in a tringle shape.
YES it is possible see the demo
You need this html:
<div id="link"> // Wrapper
<div id="square1"></div> // rotated square to cover the extra are
<a id="triangle-up" href="#"></a> // actual link
<div id="square2"></div> // rotated square to cover the extra are
</div>
CSS:
#link {
width:110px;
height:100px;
overflow:hidden;
margin:auto;
position:relative;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position:absolute;
top:0px;
left:10px;
}
#square1 {
z-index: 10;
position: absolute;
display: inline-block;
width: 50px;
height: 110px;
// background: blue;
top: -16px;
left: -12px;
transform: rotate(26deg);
-ms-transform: rotate(26deg);/* IE 9 */
-webkit-transform: rotate(26deg); /* Safari and Chrome */
-o-transform: rotate(26deg); /* Opera */
-moz-transform: rotate(26deg); /* Firefox */
}
#square2 {
z-index: 10;
position: absolute;
display: inline-block;
width: 50px;
height: 110px;
// background: blue;
top: -16px;
left: 82px;
transform: rotate(-26deg);
-ms-transform: rotate(-26deg);/* IE 9 */
-webkit-transform: rotate(-26deg); /* Safari and Chrome */
-o-transform: rotate(-26deg); /* Opera */
-moz-transform: rotate(-26deg); /* Firefox */
}