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>
Related
I'm trying to replicate a design using CSS, a simplified example of this is below:
The pink background should be 50% opacity, however the blue offset shadow/border should be 100% opacity.
I can do the general shapes but not in a way to achieve the desired transparency.
Here is an attempt I made:
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
}
.content-wrap {
position: relative;
z-index: 1;
filter: drop-shadow(13px 15px 0 rgb(0,255,255));
width: 60%;
height: 100%;
}
.content {
clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
background: rgba(255,0,255, 0.5);
height: 200px;
}
.background {
z-index: 0;
position: absolute;
top: 20px;
left: 0;
background: black;
width: 500px;
height: 90px;
margin-top: 50px;
}
<div class="container">
<div class="content-wrap">
<!-- Blue -->
<div class="content">
<!-- Pink -->
</div>
</div>
<div class="background">
<!-- Black -->
</div>
</div>
A couple of aspects are not quite right:
The drop-shadow is visible through the pink, it should just be outside of the element.
The blue should extend to the left-hand edge.
The blue is transparent when I have not assigned it to be, it seems to be related to the child element's background being transparent.
Are there any CSS masters who can figure out a way to do this? The HTML can change if needed.
a box-shadow with skew transformation can do the job here. I am using pseudo-element for the sake of the demo but you can replace them with real elements
.box {
margin: 10px 0;
display: flex;
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: 30% 0;
background: black;
}
.box::after {
content: "";
height: 200px;
width: 50%;
transform-origin: top;
transform: skew(-20deg);
background: rgb(255 0 255/80%);
box-shadow: 25px 25px 0 blue;
}
body {
margin: 0
}
<div class="box">
</div>
I need to create a div with the top left and right border with different heights, with a radius of 50px at each top end respectively, plus a linear gradient background color.
Do you know if it is possible to create it with CSS and HTML?
Thanks for your comments.
It should look like below:
You'll need 2 divs for this, with 1 nested in the other.
Rotate the child element using transform: rotate(deg) and hide the overflowing sides by applying overflow:hidden to the parent.
.parent {
background-color: #E6E6E6;
width: 200px;
height: 200px;
overflow: hidden;
padding-top: 8px;
}
.child {
height: 222px;
width: 217px;
margin-left: -10px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 25px 25px 0px 0px;
transform: rotate( -6deg);
}
<div class="parent">
<div class="child">
</div>
</div>
Yes, with a lot of manipulation (building on the other answer but closer to the example):
We need three divs. The outer one is the wrapper (invisible). The second one is the one with "different heights" and a gradient, which is rotated to give the "different heights" illusion. Finally, we have another div that's almost the same as the second one but fills in the empty space caused by the rotation of the second one.
#wrapper {
height: 500px;
width: 300px;
background-color: transparent;
position: relative;
overflow: hidden;
}
#f {
position: absolute;
width: 100%;
height: 150%;
top: 20px;
left: 18px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 10px 25px 0 0;
transform: rotate(-3deg);
}
#g {
position: absolute;
width: 100%;
height: 150%;
top: 50px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
}
<div id="wrapper">
<div id="f"></div>
<div id="g"></div>
</div>
I'm trying to make a group of elements sit in the upper left corner on a webpage. When the browser is at its max, the elements look fine. But when the browser width becomes less than the biggest element's width (outer-circle of 927px), the horizontal scrollbar appears. I would like to make it so that the elements scale down and that the horizontal scrollbar doesn't appear. I could resize all of the individual elements with media queries but I wanted to know if there's a better way of doing it.
I tried inserting the group into a bootstrap column and that didn't do anything. I also tried setting the element sizes to vw (example is setting .inner-circle width and height to 20vw). That worked until I started resizing the browser and the elements shifted off of the page.
HTML:
<div class="corner">
<div class="moon"></div>
<div class="inner-circle"></div>
<div class="mid-circle"></div>
<div class="outer-circle"></div>
</div>
CSS:
.moon{
position: absolute;
width: 240px;
height: 240px;
left: 170px;
top: -40px;
border-radius: 50%;
box-shadow: -80px 50px white;
}
.inner-circle {
position: absolute;
width: 635px;
height: 598px;
left: -134px;
top: -300px;
border-radius: 50%;
background:rgba(229, 227, 238, 0.5);
opacity: 0.4;
}
.mid-circle {
position: absolute;
width: 841px;
height: 795px;
left: -240px;
top: -400px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.3;
}
.outer-circle {
position: absolute;
width: 927px;
height: 902px;
left: -230px;
top: -410px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.2;
}
You have given the values in px. Better give in perecentages, so that it will adjust with respect to the screen.
Or try giving position relative to the parent div 'corner'.
Try using the following css properties:
max-width: (your width)px;
width: 100%;
This will decrease the size of your div as your screen size starts to get smaller than the set width.
I want to create a blurred triangle shape on each selected thumbnail image in a grid.
For now I'm doing it like this (the triangle and it's div container):
:host ::ng-deep {
.blurred-triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 400px 200px 0;
border-color: transparent rgba(250, 248, 255, 0.2) transparent transparent;
}
.dashboard-image-selected__container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
My issue is the width of the triangle. If the image is too large the triangle don't fill the width.
How can I use something like 100% width for this triangle shape so that it fills exactly the width of it's parent ?
You can use vw to make the css triangle responsive. It will set the width of the triangle based on the width of the screen.
It may be better to use something like calc(30vw + 100px) and calc(15vw + 50px) if you need to set a minimum width for any reason. However this will make the triangle larger than the container so you'll need to use overflow: hidden in this case.
.blurred-triangle {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30vw 15vw 0;
border-color: transparent rgba(250, 248, 255, 0.32) transparent transparent;
}
.dashboard-image-selected__container {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
overflow: hidden;
background-color: red;
}
<div class="dashboard-image-selected__container">
<div class="blurred-triangle"></div>
</div>
Do you mean something like the following:
img {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
img:hover {
opacity: .8
}
<img src="//cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg">
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>