This question already has answers here:
Responsive CSS Trapezoid Shape
(2 answers)
Closed 2 years ago.
Can someone help me write plain html and css code for the below shape ?
Thanks in advance
HTML/CSS
.shape {
clip-path: polygon(0 19%, 100% 0, 100% 100%, 0 81%);
background-color: red;
width: 200px;
height: 400px;
}
<div class='shape'></div>
And you can make any shapes you want with clip path.
Try this website to make shapes https://bennettfeely.com/clippy/
Transparent Borders
div {
display:inline-block;
box-sizing: border-box;
height: 200px;
border: 40px solid;
border-top-color: #00000000;
border-left: 0;
border-bottom-color: #00000000;
}
<div></div>
Multiple backgrounds
div {
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: linear-gradient(to top left, black 50%, white 51%) 0 0/100% 25% no-repeat, linear-gradient(to bottom left, black 50%, white 51%) 0 100%/100% 25% no-repeat, black;
}
<div></div>
Pseudo Elements
div {
position: relative;
display: inline-block;
box-sizing: border-box;
height: 200px;
width: 50px;
background: black;
}
div:before,div:after {
content: '';
position: absolute;
height: 25%;
width: 100%;
}
div:before {
top: 0;
background: linear-gradient(to top left,black 50%,white 51%) top/100% no-repeat ;
}
div:after {
bottom: 0;
background: linear-gradient(to bottom left,black 50%,white 51%) bottom/100% no-repeat;
}
<div></div>
Related
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 1 year ago.
Hi i need to know how to turn this square to rounded edges radius 50px
body {
background-color: #241d33;
}
.rainbow-box {
background-color: #302244;
border: 5px solid transparent;
border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
border-image-slice: 1;
height: 200px;
margin: 20px auto;
width: 200px;
}
<div class="rainbow-box"></div>
You can use 2 gradients and background-clip:
possible example:
body {
--border:25px;
margin: 0;
min-height: 100vh;
background: url(https://picsum.photos/id/1051/800/300) 0 0 / cover ;
}
body, .rainbow-box {
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-box {
border: var(--border) solid transparent;
background: linear-gradient(#fff, #fff), linear-gradient( to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%) center center /calc(100% + (var(--border) * 2)) calc(100% + (var(--border) * 2));
background-clip: content-box, border-box;
border-radius: 25%;
height: 200px;
margin: 20px auto;
width: 200px;
mix-blend-mode: multiply;
}
<div class="rainbow-box">
<p>HELLO</p>
</div>
I need to create a responsive triangle <div>. I was able to create it using css skewed, but it is not responsive, when I change the screen width it gets messed up. Can someone help me? Thank you very much in advance!
Here is what I want:
This is the code I have so far:
.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}
.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}
<div class="skewed-box-one"></div>
You could use CSS clip-path, do note that broswer support is limited. With this tool you can generate the shape you want.
.triangle1 {
clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
background: red;
width: 100%;
height: 100%;
}
.triangle2 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
background: red;
width: 100%;
height: 100%;
}
.container {
width: 50%;
height: 300px;
margin-bottom: 20px;
}
<div class="container">
<div class="triangle1">1</div>
</div>
<div class="container">
<div class="triangle2">2</div>
</div>
I could solve this problem with #SuperDJ help, usingclip-path. I also find this website that helps to draw shapes:
https://bennettfeely.com/clippy/
Here is the final code i used:
.triangle1 {
position: absolute;
-webkit-clip-path: polygon(21% 96%, 0 54%, 100% 54%);
clip-path: polygon(21% 96%, 0 54%, 100% 54%);
background: #BBDEFB;
width: 100%;
height: 200px;
margin-top: -40px;
}
Thanks very much everybody that tryed to help and a special thanks to #SuperDJ!
Here is another idea more supported than clip-path using background coloration
.box-down {
height:80px;
padding-bottom:50px;
background:
linear-gradient(to bottom right,red 48%, transparent 50%) bottom right/30% 50px,
linear-gradient(to bottom left ,red 48%, transparent 50%) bottom left/70.1% 50px,
red content-box;
background-repeat:no-repeat;
}
.box-up {
height:80px;
padding-top:50px;
background:
linear-gradient(to top right,red 48%, transparent 50%) top right/70% 50px,
linear-gradient(to top left ,red 48%, transparent 50%) top left /30.1% 50px,
red content-box;
background-repeat:no-repeat;
margin-top:20px;
}
<div class="box-down"></div>
<div class="box-up"></div>
I am attempting to display an image, and want it to carry into a little triangle under the <div>. I have seen this question which drags the triangle across the whole page. I would like to display a triangle that only takes up a small space (like the image) Instead of the solid colored background, there's a background image.
div {
width: 100%;
background-image: url("https://www.shopmarriott.com/images/products/v2/xlrg/Marriott-platinum-stitch-bed-bedding-set-mar-101-st-gy_xlrg.jpg");
max-height: 200px;
padding: 75px;
position: relative;
background-size:cover;
padding-bottom:100px;
overflow:hidden;
}
div:after {
margin-left:-30px;
left: 50%;
content:'';
margin-left: -30px;
margin-top: 70px;
position:absolute;
border-left:30px solid #fff;
border-right:30px solid #fff;
border-top:30px solid transparent;
}
h1 {
color: white;
font-size: 36px;
text-align: center;
}
<div>
<h1>Sheets</h1>
</div>
You would have to use clip-path if your using a background image.
div {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 500px;
height: 500px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 66% 75%, 50% 99%, 33% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 66% 75%, 50% 99%, 33% 75%, 0% 75%);
}
<div></div>
To help you create the size and style you want you can use this online Clippy tool (hint: select the "Message" pre-made shape and play with that)
.container {
position:relative;
background-color:#e15915;
height:320px !important;
width:100% !important;
}
.container:after {
content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
http://jsfiddle.net/9AbYc/1/
I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?
body {
background: #eee;
}
.darker {
position: fixed;
top: -94%;
left: -10%;
width: 150%;
height: 150%;
background: #dd4f39;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
<div class="darker"> </div>
I found an interesting way to do this from here, which uses clip-path
.Answering my own question so that everyone can use it.
html,
body {
margin: 0;
}
body {
background: #eee;
}
.box {
width: 100vw;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(0 0, 100% 0, 100% 100%);
}
<div class="box"></div>
This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements
div and it's pseudo element should have same width and border-left respectively.
div and it's pseudo element should have same height and border-top respectively.
html, body {
margin: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: white;
}
.box::after {
content: ' ';
border-top: 100vh solid #dd4f39;
border-left: 100vw solid transparent;
width: 0;
position: absolute;
}
<div class="box"></div>
JS fiddle
https://jsfiddle.net/kqsrmrss/2/
You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail
Fiddle demo
Stack snippet Note 1
body {
background: #eee;
}
.darker {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 50%;
background: #dd4f39;
overflow: hidden;
}
.darker::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: gray;
transform: skewY(26.5deg);
transform-origin: left top;
}
<div class="darker"></div>
Optionally, you can add media query to control the angle at different screen sizes
Fiddle demo 2
With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.
Note 1 Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.
Please Use this code snippet.
div {
width: 100%;
height: 100px;
}
.diagonalRising {
border: 1pt solid black;
background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalFalling {
background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}
.diagonalCross {
position: relative;
background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}
.diagonalCross:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}
<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>
Try this,
.box::after {
background: #E52A35
content: '';
position: absolute;
width: 100%;
height: 100vh;
background-color: #dd4f39;
clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}
I want to remove the corners of borders like this picture.
You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:
.bordery {
border: 1px solid teal;
padding: 20px;
position: relative;
}
.bordery::after,
.bordery::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.bordery::after {
bottom: -1px;
right: -1px;
}
.bordery::before {
top: -1px;
left: -1px;
}
<div class="bordery">This is just some sample content.</div>
You can use :before and :after pseudo elements to create this.
.el {
position: relative;
width: 200px;
height: 50px;
margin: 50px;
}
.el:after,
.el:before {
content: '';
position: absolute;
height: 90%;
width: 100%;
}
.el:before {
top: -5px;
left: -5px;
border-top: 1px solid orange;
border-left: 1px solid orange;
}
.el:after {
bottom: -5px;
right: -5px;
border-bottom: 1px solid orange;
border-right: 1px solid orange;
}
<div class="el"></div>
You can use css3 linear-gradient to draw this background to just a single <div> element and without using any pseudo elements.
div {
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
}
div {
background-color: #eee;
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
height: 100px;
width: 80%;
}
<div></div>
You can do it by following:
#rectangle{
width:400px;
height: 200px;
border-style: solid;
color:orange;
position: absolute;
}
#eraser1{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: -10px 0px 0px 374px;
}
#eraser2{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: 175px 0px 0px -13px;
}
Use clip-path property to clip corner
div{
width: 15em;
height: 5em;
border: 2px solid red;
clip-path: polygon(0 0, 91% 0, 100% 12%, 100% 100%, 12% 100%, 0 89%);
}
<div></div>