And it also should work in IE11.
I've tried:
Usual triangle-crating techniques using border - Failed, no background image.
Clip-path - Failed no IE support
Triangles with skewing and transforming have to war of having proper percent-based lengths. After ~3 hours of trying to figure it out - Failed
My last desperate effort will probably be creating an SVG mask with triangle cut into it and placing it on top of the <div> with desired image. But it feels hacky.
One posibility to get it:
.base {
width: 70%;;
height: 200px;
margin: 10px;
}
.test {
background-image: url(http://lorempixel.com/600/600);
width: 100%;
height: 0px;
padding-top: 86.6%;
position: relative;
}
.test:before {
content: "";
position: absolute;
height: 100%;
width: 50%;
bottom: 0px;
background-image: linear-gradient(-60deg, transparent 50%, white 50%);
}
.test:after {
content: "";
position: absolute;
height: 100%;
width: 50%;
bottom: 0px;
right: 0px;
background-image: linear-gradient(60deg, transparent 50%, white 50%);
}
<div class="base">
<div class="test"></div>
</div>
Related
body {
background-image: linear-gradient(
0deg,
var(blue) 70%,
var(red) 30%
)
no-repeat;
height: 100vh;
}
1) How to add a border-radius at the exact bottom left and right corners of the red background-color?
As i require the border-radius in the red color which is part of the
linear-gradient, i don't know how.
Its just on the body element.
This snippet puts the red background onto the after pseudo element which is given 30% of the overall height of the body and has the two bottom corners rounded.
The before pseudo element is given the blue background.
body {
--blue: blue;
--red: red;
height: 100vh;
width: 100vw;
}
body::before,
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
body::before {
background-color: blue;
height: 100%;
}
body::after {
height: 30%;
background-color: var(--red);
border-radius: 0 0 20px 20px;
}
<body></body>
It is possible to combine linear and radial gradients to get a rounded effect, but I find the result isn't always as crisp as using border rounding.
I'm attempting to create a background of 3 different color shades of blue. 2 of the 3 shades of blue will be curved and angled slightly.
Main background blue: #005A83
First lighter shade blue: #036595
Second lighter shade blue: #0571A4
I've done some research and I believe I can achieve this by using linear-gradient but I'm still having some issues getting the look I am expecting.
I attempt to re-create something like this image here:
Here is my code sample:
html, body {
height: 100%;
}
body {
background: linear-gradient(65deg, #005A83 20%, #036595 20%, #0571A4 40%, #005A83 40%);
}
I am having issues with 2 main parts of this.
I am having issues showing the 2 lighter shades of blue. Currently only showing 1 color. I've attempted to fix this by moving around some of the percentages used for linear-gradient but it blends in the colors together which is more difficult to see.
How can I curve the lighter shades to match the image above showing different shades of blue.
You can do a radial gradient and then shift its center off the page. You'll need quite a larger radius based on your sample.
I had a rough go at it below. You will need to adjust the circle size (first value), offsets (second and third value), and the individual stop percentages to get what you deem is perfect.
html, body {
height: 100%;
}
body {
background: rgb(0,90,131) radial-gradient(circle 5000px at -200px 200%, rgba(0,90,131,1) 0%, rgba(0,90,131,1) 10%, rgba(3,101,149,1) 10%, rgba(3,101,149,1) 12%, rgba(5,113,164,1) 12%, rgba(5,113,164,1) 13%, rgba(0,90,131,1) 13%, rgba(0,90,131,1) 100%);
}
You can use multiple HTML elements to achieve the desired result.
<body>
<div class="container">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
height: 500px;
width: 100%;
background-color: rgb(10, 5, 87);
overflow: hidden;
}
.circle1 {
border-radius: 100%;
position: absolute;
background-color: rgb(0, 0, 105);
left: 0;
bottom: 0;
height: 600px;
width: 600px;
transform: translate(-50%, 50%);
z-index: 4;
}
.circle2 {
border-radius: 100%;
position: absolute;
background-color: rgb(22, 22, 148);
left: 0;
bottom: 0;
height: 1200px;
width: 1200px;
transform: translate(-50%, 50%);
z-index: 3;
}
.circle3 {
border-radius: 100%;
position: absolute;
background-color: rgb(6, 6, 180);
left: 0;
bottom: 0;
height: 1800px;
width: 1800px;
transform: translate(-50%, 50%);
z-index: 2;
}
As shown in image , there is navy blue color given to div inclinedly, how can do it using bootstrap in asp.net core project?
You cannot do with bootstrap. However i have used CSS Path to create the same shape
You can use this website to make CSS Path
.backgroundCover {
height: 200px;
width: 200px;
background: blue;
border:1px solid black;
}
#clipPath {
height: 200px;
width: 200px;
background: white;
clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
<div class="backgroundCover">
<div id="clipPath">
</div>
</div>
You can also use the :after and :before pseudo elements to create rectangles and then rotate them. This has higher support rate by using transform instead of clip-path in terms of old browsers.
body { background: black; }
.container {
width: 200px;
height: 260px;
background: white;
overflow: hidden;
position: relative;
}
.container:before,
.container:after {
content: '';
width: 50%;
height: 50%;
position: absolute;
background: #0d2e41;
bottom: -25%;
}
.container:before {
transform: rotateZ(135deg);
left: -25%;
}
.container:after {
transform: rotateZ(225deg);
right: -25%;
}
<div class="container">
</div>
The goal is to create something like this:
.square {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, purple 50%, gray 50%);
}
<div class="square"></div>
With a square it's easy, as we know that if we make a line from the two corners in front of each other, it will close 45deg with the side next of it. But what if we don't know the width and height of the element, but we want to keep the effect? Just a logic, but maybe it helps to find the solution: the effect could be earned with a square transform(scale)-d to the required parameters, but the problem still exists: we don't know those parameters. Another logic: if the gradient would be an image, (with worse quality) with background-size, it could be stretched.
Any ideas?
Yep, there’s a syntax for corners!
.square {
width: 200px;
height: 100px;
background-image: linear-gradient(to top right, purple 50%, gray 50%);
}
<div class="square"></div>
Maybe you can try using clip-path with :after and ':before' pseudo class.
.square {
width: 100px;
height: 100px;
position: relative;
}
.rectangle {
margin-top: 1em;
width: 100px;
height: 200px;
position: relative;
}
.square:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: grey;
clip-path: polygon(100% 100%, 0 0, 100% 0);
}
.square:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: purple;
clip-path: polygon(100% 100%, 0 0, 0 100%);
}
<div class="square"></div>
<div class="rectangle square"></div>
After creating a clip path to mask away a part of an image leaving behind a downward pointing arrow, I get this thin line on high resolution screens or when i zoom in on a regular screen.
here is the css for the clip path:
.clearflowptr {
margin-bottom: 40px;
margin-top: 40px;
background: white;
height: 50px;
width: 100%;
-webkit-clip-path: polygon(0 0, 46% 0, 50% 100%, 54% 0, 100% 0, 100% 100%, 0 100%);
the margin-bottom and margin-top just add spacing to the element. I tried playing around with the padding but to no avail.
Any help is appreciated.
Thanks
You can try this one instead of using clip-path if its not a requirement.
div{
background-color: #0b8192;
width: 100%;
height: 15px;
position: relative;
}
div:after{
content: '';
width: 0px;
height: 0px;
border: 40px solid #0b8192;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: auto;
border-right-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
}
<div>
</div>