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.
Related
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...
I am using transform property of CSS3. It creates space on the left side of the div after it rotates it. Heres my JSfiddle
SO want some code:
<div>
Maglevboard
</div>
<style>
div {
font-size:5em;
transform:rotate(-90deg);
display:inline-block;
}
</style>
You can fix it by adding a translation and using a proper transform-origin. I think you want
div {
font-size: 5em;
transform-origin: 100% 0;
transform: translateX(-100%) rotate(-90deg);
display: inline-block;
}
<div>Maglevboard</div>
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 have a div 700px x 300px and a background picture 700px x 300px. The div height can be increased to 600px. Div sizes are changed with jQuery.
I have a next CSS style for div:
#myDiv {
position:relative;
overflow:visible;
background:transparent url(../images/background.jpg) bottom no-repeat;
border:1px solid #000;
-webkit-box-shadow:0 0 10px 2px #000;
-moz-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
box-shadow:0 0 10px 2px #000;
margin:10px;}
If div height is increased, the background should be mirrorly reflected by vertical. I've added the next CSS style in my CSS file:
#myDiv:before {
background:url(../images/background.jpg);
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);}
But it does not work (I try different browsers). May I miss something?
I think you miss few important styles in the :before element. You have to specify content, dimensions and since :before has display default inline, you have to make it block.
#myDiv:before {
content: "";
display: block;
height: 300px;
width: 700px;
background: url(http://lorempixel.com/700/300/);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
The whole demo: http://codepen.io/canescz/pen/zHCjA
Note that the :before element pushes whole content down so you might want to make the :before as position:absolute. But I think if you play with it, you will figure out what you need.
By the way only -webkit prefix should be enough since other browsers don't use prefixes anymore for transform. Check http://caniuse.com/#search=translate to match your desired browser support.