I have a block(div) with a lineair gradient.
Is it possible to make the top right corner to cut out a triangle?
You have border-radius 5px for instance to make a block with round corners. But is it possible to have a transparant top right corner of 40px?
Thanks for reading
Sorry it is like this:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-top-right-radius&preval=100px
Only not rounded but a sharp corner like a triangle. (Straight line)
<div class="top-block">content</div>
.top-block {
background: lineair-gradient(from top to right, red, blue);
border-top-right-radius: 100px;
}
You can achieve the effect with ::after / :: before elements like this.
.yourelement{
position:relative; // Required.
}
.yourelement::after {
content: "";
position: absolute;
border-left: 40px solid transparent;
border-top: 40px solid #fff; // YOUR BG COLOR
top: 0px;
right:0px
}
You can base the px sizes on the size of your element as you please, also adjust the colors etc.
this essentially places a triangle over your corner to make it appear cut.
Related
Lately, I've gotten into making CSS art and I noticed something that I don't understand about CSS borders.
If I style an element to be rounded with a transparent background, and set a border on only one side, there's still a faint line on all the other sides that shows up only on mobile.
<div></div>
div {
width: 300px;
height: 150px;
background: transparent;
border-top: 5px solid purple;
border-radius: 50%;
}
Compare the following CodePen on a PC vs phone to see what I mean:
https://codepen.io/aradevich/pen/mdrLvqx
Screenshot:
ellipse with 5px top border
This effect is particularly bothersome when it skews facial features in CSS art, like with the eyes here on mobile: https://codepen.io/aradevich/pen/qBaxQye?editors=1100
Does anyone know why this happens, and how I can address it?
Thank you!
Here is a different idea to have the same result without the border issue:
div.box {
width: 300px;
height: 150px;
background:
/* 150 = width/2 70 = height/2 - 5px of border */
radial-gradient(151px 70px at bottom, transparent 98%,purple)
top/100% 50% no-repeat;
border-radius: 50% 50% 0 0;
}
<div class="box"></div>
As far I know, maybe it's caused by browser rendering. So, the solution is change the graphic image to SVG or PNG instead of css.
I would like to have full height left and right borders in my element, but I would like to bottom border to be transparent.
I currently use this:
.graph {
border: 1px solid #ddd;
border-bottom-color: transparent;
}
but the consequence of this is that the left and right borders are missing the bottom pixel:
I would ideally like my graph label element to have full height borders so I don't have that ugly half pixel missing at the bottom.
Is there anything I can do?
Try border-bottom-width: 0; to remove the bottom border entirely.
try border-bottom: none; after the general bordersetting
Try border-bottom-style: hidden; to hide the bottom border entirely.
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
Imagine a software box like the following:
(source: sitellite.org)
Now imagine the shadow is not there. Is there a CSS way that I can simulate that background shadow, and work on at least Firefox and Chrome, if not also IE9 and up?
One way would be to start with a triangle shape like this
<div id="triangle"></div>
#triangle {
width: 0;
height: 0;
border-top: 100px solid grey;
border-left: 100px solid transparent;
opacity:0.1;
}
see example
Then add a linear-gradient and position it behind the image. Take a look at this gradient generator as a starting point.
Then you could use transform to skew it slightly.
I've found several articles on how to angle borders, but what I'm trying to do is a little different.
I have an element with dashed borders like so:
.box { border: 1px dashed #fff; }
However, I am trying to simultaneously have the corners of the .box element and its dashed border be at a 45 degree angle.
Is this possible?
You could get some pretty close-to-45 degree angles by tweaking the bezier of border-radius:
http://www.css3.info/preview/rounded-border/
Is there a reason why you wouldn't want to do this with 2 background elements?
.box {
/* this background image will stick to the top of the box */
background: url(/* you would put a 10px high image that is the width of said box */) no-repeat left top;
display: block;
padding: 10px 0 0; /* this padding element needs to match the background height */
}
.box .inner {
/* this will stick the background image to the bottom, and grow with the natural height of the box */
background: url(/* you'd put a looong background image, that could stretch vertically */) no-repeat left bottom;
display: block;
padding: 0 10px 10px;
}
Your markup would look like this:
<div class="box">
<div class="inner">
...Content goes here...
</div>
</div>
I can understand if you want to do it with just the border style, but I don't know of a way to do right angles and make it work in IE, to be honsest.