This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 5 years ago.
I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get...
There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted.
I have spend a great deal of time trying to alter the codes of the others, but it ends up in a mess.
This is the original CSS code I was experimenting with to get the results I need...
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000;
-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;
}
body {
background:
url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
background-size: cover;
}
Here is the HTML....
<div>Slanted div text</div>
<div>
Slanted div text<br/>
on several lines<br/>
Another line
</div>
<div>Wider slanted div text with more text inside</div>
Create your div, then overlay an absolutely-positioned, rotated pseudo-element to create the slanted impression.
div {
height: 50px;
width: 300px;
background-color: black;
position: relative;
overflow: hidden;
}
div:after {
height: 100%;
width: 100%;
background-color: white;
position: absolute;
content: "";
transform: rotate(45deg);
transform-origin: bottom right;
}
<div></div>
Related
This question already has answers here:
Center triangle at bottom of div full width responsively
(6 answers)
Create bottom responsive arrow [duplicate]
(1 answer)
Closed 1 year ago.
I am working upon creating a HTML page that will have text written under shape, see pic for the reference. To draw this shape, I am using following:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 100%;
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: red;
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: red;
transform: skew(0deg, -6deg);
}
<div style="width: 100%">
<div id="chevron">
</div>
</div>
However, the shape is pretty different than what I am trying to draw.
Here is the desired result:
You could use clip-path this website is great to get the hang of it
in your case you would need something like this :
clip-path: polygon(100% 0, 100% 15%, 50% 25%, 0 15%, 0 0);
I am trying to create a hexagon using CSS. There are a number of questions about this already, but in my specific case I need it composed of 3 identical shapes that are different colors.
There are 2 specific requirements:
The overall size of the hexagon must be controllable by a single value. In my case that is the width of the .hexagon-wrapper class
The hexagon shape must be centered horizontally and vertically within it's parent (.hexagon-wrapper), and that wrapper must also be centered horizontally and vertically within its parent (the outermost div)
You'll notice there are some problems with my attempt:
The 3 pieces that make up the hexagon arent tightly aligned,
and the overall shape starts to break apart when you change
.hexagon-wrapper width
I'm using some magic numbers to translate the individual pieces, and they don't guarantee that the pieces will stick together after resizing, nor do they really guarantee that the elements are perfectly centered horizontally and vertically
Is there an easier way to do this, or some simple math that I'm missing? Basically, how do I keep the pieces together, and how do I ensure everything is centered?
I did consider creating a 3D cube and using transform3d to ensure everything sticks together, but I do not want to go with this approach because I have had many anti-aliasing issues when using transform3d and want to avoid that altogether
.hexagon-wrapper {
display: flex;
position: relative;
background-color: green;
width: 40%;
height: 100%;
margin: auto;
}
.hexagon-part-red {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(112%, -50%) rotate(-60deg) skewY(30deg);
background: red;
margin: auto;
}
.hexagon-part-yellow {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(-49%, 25%) rotate(0deg) skewY(30deg);
background: yellow;
margin: auto;
}
.hexagon-part-blue {
position: relative;
width: 27.85714285714286%;
padding: 0 0 32.16760145166612% 0;
transform: translate(-69%, 25.1%) rotate(60deg) skewY(30deg);
background: blue;
margin: auto;
}
<div>
<span class="hexagon-wrapper">
<div class="hexagon-part-red"></div>
<div class="hexagon-part-yellow"></div>
<div class="hexagon-part-blue"></div>
</span>
</div>
Here is an easier idea where you don't need any complex calculation and a lot of transform:
.hexagon-wrapper {
position: relative;
background-color: green;
width: 40%;
margin: auto;
display: flex;
justify-content: center;
}
.hexagon-part-red,
.hexagon-part-yellow,
.hexagon-part-blue {
width: 30%;
display: inline-flex;
}
.hexagon-part-red:before,
.hexagon-part-yellow:before,
.hexagon-part-blue:before {
content: "";
padding-top: 115.47%; /* 100/cos(30deg) */
}
.hexagon-part-red {
position: absolute;
top: -50%;
height: 100%;
width: 60%;
background: red;
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}
.hexagon-part-yellow {
transform: skewY(30deg);
transform-origin: left;
background: yellow;
}
.hexagon-part-blue {
transform: skewY(-30deg);
transform-origin: right;
background: blue;
}
body {
margin: 0;
display: flex;
height: 100vh;
}
<div class="hexagon-wrapper">
<div class="hexagon-part-red"></div>
<div class="hexagon-part-yellow"></div>
<div class="hexagon-part-blue"></div>
</div>
This question already has answers here:
How to make "see through" text?
(2 answers)
Closed 5 years ago.
.parent-div {
background-image: url(path\to\image);
background-size: cover;
}
.text-div {
/* make text transparent but not this background */
background-color: orange;
}
<div class="parent-div">
<div class="text-div">Welcome!</div>
</div>
I want to make the text of text-div to be transparent so that I can see background of parent-div. and remaining part of text-div must be opaque.
Basically I want this effect :
I found an answer for my question here:
https://codepen.io/zFunx/pen/EbOQow
body {
padding: 0;
margin: 0;
height: 100%;
}
.overlay {
background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTM2NDExNjNf?inline=1);
height: 100%;
position: relative;
background-size: cover;
}
.overlay h1 {
position: absolute;
background-color: #000;
color: #fff;
mix-blend-mode: multiply;
text-align: center;
font-size: 3em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="overlay">
<h1>Mix-Blending in CSS</h1>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
I have some text that I've rotated -90deg. Does anyone know a way to get it to anchor to the ceiling of the parent element?
So far I've been able to anchor only to the floor:
http://jsfiddle.net/tpm3f
HTML:
<div>
<h2>hello, world</h2>
</div>
CSS:
div { height: 300px; background: red; position: relative; }
h2 {
color: white;
margin: 0;
font-size: 2.5em;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: bottom left;
position: absolute;
left: 1.5em;
bottom: 0;
}
Changing bottom: 0 to top: 0 produces a weird result; the text is neither anchored to the ceiling by its left nor its right side.
Does anyone know a pure CSS way round this?
if you need the element locked to the top and the left corner have a look at something like
h2 {
color: white;
margin: 0;
font-size: 2.5em;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top right;
position: absolute;
right: 100%;
top: 0;
white-space:nowrap;
}
http://jsfiddle.net/8gsuD/1/
Try:
h2 {
-webkit-transform-origin: top right;
top: 0;
}
Fiddle