This question already has answers here:
draw angular side / parallelogram using CSS
(3 answers)
Closed 6 years ago.
I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular
So then my question is, how could create 3 parallelogram-divs or something similiar?
Any advices or guidelines would be appreciated
Thanks
PS: I cannot use a image as background because, If you do the windows smaller the backround doesn't follow the text
You can use the negative SkewX transform to get the desired effect:
div {
margin: 20px;
width: 200px;
height: 100px;
display: inline-block;
background: yellow;
border: 1px solid black;
transform: skewX(-10deg);
}
<div></div>
weinde almost has it, but 2 problems: You need to set display inline block, and the contents of the div will be skewed. A really lazy way to do this would be:
.para {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
display: inline-block;
vertical-align: top;
}
.unskew {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
<div class="para"><div class="unskew">stuff</div></div>
<div class="para">stuff 2</div>
I feel like the unskew div is unnecessary though.
You could also try playing with css3 background gradients. Apply the gradient to a parent div sitting behind the 3 elements with text, for example. http://www.quirksmode.org/css/images/angles.html
Try this CSS style:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;}
insted of #parallelogram you can chose your own class name...
Related
I really hope someone can help me with this one.
I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.
You can see it here: http://jsfiddle.net/bgLv6L9j/5/
I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky.
.shape:hover::before {
background-color: #245a85;
content: "";
position:absolute;
}
I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).
I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.
If you do this:
.shape a {
position: absolute;
}
Instead of relative It seems that will fix the problem.
http://jsfiddle.net/bgLv6L9j/7/
Edit:
I rewrote it with a much simple code based on yours.
HTML
<a class="shape" href="#">Text</a>
CSS
.shape {
border: 2px solid crimson;
border-radius: 5px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
-moz-transform: perspective(40em) rotatex(-45deg);
-ms-transform: perspective(40em) rotatex(-45deg);
-o-transform: perspective(40em) rotatex(-45deg);
-webkit-transform: perspective(40em) rotatex(-45deg);
transform: perspective(40em) rotatex(-45deg);
}
.shape:hover {
background: crimson;
}
That's it. http://jsfiddle.net/8sdqteke/
I want to code the below design in HTML&CSS
What I made so far is:
I made it using:
a links
SVG as background
Absolute position and translate(x,y) property in CSS.
Please check this fiddle for the live link
The issues in my design are:
Each item is actually a rectangle, if you notice the highlighted
rectangle in red, this is the area of the selection, so if you hover
over the left corner of m2, it will select m3.
I want to change
the background color of the SVG background when hover, how to
achieve that?
Is there an ideal way to make this concept better?
even if we used JS to position the elements.
Click here to view the SVG shape itself.
CSS code for the items:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
Thanks,
This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):
DEMO
.wrap{
width:50%;
margin-left:13%;
transform-origin:60% 0;
transform: rotate(-45deg);
}
.wrap > a{
float:left;
width:19%;
padding-bottom:19%;
margin:0.5%;
background:teal;
}
.wrap > a:hover{
background:gold;
}
.wrap > a:nth-child(4){
clear:left;
margin-left:20.5%;
}
.wrap > a:nth-child(7){
clear:left;
margin-left:60.5%;
}
<div class="wrap">
</div>
To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)
You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.
For example:
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
A direct answer would be to use the poly attribute of SVG
That was you are not relying on CSS to rotate it.
The svg element once drawn is not manipulated after the css changes the appearance.
Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..
<svg height="250" width="500">
<polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>
Basic example
JsFiddle
Update :
The code you have produced is shows it is not the SVG background you are editing..
If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.
For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.
My answer only facilitates the drawing onto the SVG.
Did you try css rotate to restrict the rectangle. You could use SVG anyway as the background now.
.m-item {
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);
}
.m-item span {
position: absolute;
transform: rotate(-45deg) translate(0, -14px);
}
.m-item:hover {
background-color: #AA5;
}
<span>m1</span>
I have a two div's and one anchor tag. Now the first div, I want to transform skew it only the right side of the div and the second div, I want to transform skew it only on the left side. The anchor tag, I want it to transform skew both left and right side (please refer to the image attach).
my html codes are:
<div class="box box1"></div>
<div class="box box2"></div>
<a class="theanchor" href="index.html" target="_blank">Home</a>
and my css codes are:
.box{
width: 900px;
height: 300px;
background: red;
}
.theanchor{
display: block;
padding: 8px 13px;
background: blue;
text-decoration: none;
}
and what i tried so far and my first source to figure things out is:
transform:skewX(10deg));
but nothing works, if anyone here could point me how to do it or how to make it, it would be greatly appreciated. Thank you in advance.
I think I've found a way around this, by skewing a container div, then creating a content div which unskews the content should give you the 3rd shape.
To create right angled versions, I gave the content div a background colour and offset it with position:relative and then left/right (depending on what side you want your right angle)
Example here:
https://codepen.io/zarocreative/pen/Jjopdmr
div.skewed-heading-container {
color: #FFF;
background-color:#0096aa;
display:inline-block;
margin:20px;
padding:0 20px;
-ms-transform: skew(-20deg,0);
-webkit-transform: skew(-20deg,0);
transform: skew(-20deg,0);
}
div.skewed-heading-content {
-ms-transform: skew(20deg);
-webkit-transform: skew(20deg);
transform: skew(20deg);
position:relative;
right:-50px;
background-color:#0096aa;
padding:5px 30px;
}
I'm trying to get these divs to overlap and have the text be inside the triangle but the text can only be moved around outside the triangle.
JSFiddle
This is the HTML+CSS:
<div class="tri">
<div class="test">
This is test
</div>
.tri {
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
position:relative;
}
.test {
display:inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom:1;
margin-top:-80px;
margin-left:-80px;
color:red;
}
You can simply use position: relative; for the container element and than use position: absolute; for the child element, this way, your absolute positioned element won't flow out in the wild, and will be relative to the parent element, also it will be overlapped this way
Demo
Also it's a CSS triangle with borders and height and width set to 0 respectively, so you cannot expect an the child element to overlap the triangle
I'm not entirely sure of what you are trying to achive here.
If you want the text to be inside the black triangle, you could just edit out
display:inline-block;
Worked in JSFiddle, only tested in FireFox and Chrome though, might want to check more browsers.
I have a submit button whose text needs to be rotated. However, I can only seem to work out how to rotate the entire submit button rather than just the VALUE.
The CSS I'm using to rotate is simply:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
and the whole CSS for the submit button is:
.form input[value="SUBMIT"] {
height:1.5em;
width:7em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
font-size:1.5em;
}
As you can guess, this applies to the entire submit button, so the whole thing is rotated (hence why I've swapped the height/width attributes to make it a thin vertical bar, see image below).
The Problem is that this makes the button position really weirdly, and I can't get it to the desired position in the div (which is directly to the right of the textarea). There is more than ample room, however adding margin-top:-XYZem only pushes the button up a little bit, and then stops.
Here's a live version so you get the idea
The button is very easy to position when I haven't done the rotation; is it possible to rotate ONLY the text value that sits on the button, and not the entire button itself?
put input in div and customize your style
.button{
/* write your style here*/
background-color: #12E9F0;
border: medium none;
margin-right: 0;
padding: 0.2em 0.6em;
}
.button input[type="submit"]{
height:1.5em;
width:7em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
font-size:1.5em;
border:0 none;
background:none;
}
<div class="button">
<input type="submit" value="submit" />
</div>
I think this is what u need :
.form input[value="SUBMIT"] {
-moz-transform: rotate(-90deg);
font-size: 1.5em;
height: 1.5em;
position: absolute;
top: 3.5em;
width: 7em;
}