This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 5 years ago.
Polygon Shape
Hi I am trying to make an angled polygon shape? I'm wondering if anyone can point in the right direction? Would it be a transform method like skew and then scale? Sorry, new to polygon shapes
Thanks in Advance,
Edward
Not quite sure how you plan to use this but there are a few different ways you can create polygon shapes.
Here are two ways:
using background: linear-gradient() and playing with a number of gradients, angles and stop position.
Using ::after pseudo element and forcing it to become a scalene triangle with the border color trick
.polygon {
background: linear-gradient(-14deg, #ddd 21%, transparent 0), linear-gradient(30deg, #ddd 15%, gold 0);
height: 300px;
width: 500px;
}
.polygon2 {
background: gold;
width: 500px;
height: 200px;
position: relative;
}
.polygon2::after {
content: '';
border-left: 150px solid transparent;
border-right: 350px solid transparent;
border-top: 80px solid gold;
position: absolute;
height: 0;
top: 100%;
width: 0;
}
<div class="polygon"></div>
<hr>
<div class="polygon2"></div>
Related
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
Closed 4 months ago.
now i was doing a project. for fun with my friends wanted to do a circle where it rotates in the Z axis but i needed a gradient so did some research how to put a gradient on a border found this did it but my border radius went missing what do you guys recommend?
Take a look at this thread here: Is it possible to create a gradient border on a CIRCLE with css3?
Because you cannot use that with the border property, you have to add the linear gradient to the background. Then you must add a new element inside the circle to "cut out" the inner circle (and just leave a "border" showing"
Here is and example:
.circle {
--circle-size: 200px;
--circle-border-width: 10px;
background: -webkit-linear-gradient(top left, crimson, blue, pink);
width: var(--circle-size);
height: var(--circle-size);
border-radius: 50%;
padding: var(--circle-border-width);
}
.content {
width: var(--circle-size);
height: var(--circle-size);
background: white;
border-radius: 50%;
}
<div class="circle">
<div class="content"></div>
</div>
.circle {
background-image:linear-gradient(red,green);
padding:10px;
width:300px;
height:300px;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width:1px;
padding:1px;
}
.circle > div {
background:lightyellow;
height: 299px;
width: 299px;
border-style: solid;
border-color:transparent;
border-radius: 50%;
border-width:1px;
}
<div class="circle">
<div></div>
</div>
This question already has answers here:
Border Gradient with Border Radius
(2 answers)
SVG with radialGradient not work in browsers
(1 answer)
Closed 2 years ago.
In following code I expect both divs to be round. But the first one with border-image applied is square. How can I fix that and make it round too?
div {
float: left;
width: 130px;
height: 130px;
margin: auto;
border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;
}
div + div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>
It is not possible to combine them. The W3 Spec says:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
However, you can achieve the same effect by using a multiple elements and a CSS gradient
#cont{
background: -webkit-linear-gradient(left top, crimson 0%, blue 100%);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: white;
width: 300px;
height: 300px;
border-radius: 1000px;
}
<div id="cont">
<div id="box"></div>
</div>
You can use radial-gradient background-image. And you can mask it with mask-image. border-image does not work with border-radius.
div {
float: left;
width: 190px;
height: 190px;
margin: auto;
/* border: 30px solid transparent;
border-radius: 50%;
border-image: linear-gradient(45deg, red, blue) 30;*/
border-radius: 50%;
background: linear-gradient(45deg, red, blue);
-webkit-mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
mask-image: radial-gradient(transparent 0 65px, #000 65.5px);
}
div+div {
margin-left: 1em;
border-image: none;
border-color: green;
}
<div></div>
<div></div>
I have been playing for a long time trying to achieve this using inset shadow css3 property. I would like to inset the blue triangle inside a div like I've seen the outside triangles done using just a border css property.
Can someone please advise me is the inset shadow approach good, or should I use some other way? How can I achieve this effect? Insetting a triangle using pure css?
It's not possible using box-shadow, however you could use a triangle on a :pseudo-element instead.
div {
position: relative;
width: 100px;
height: 100px;
background: black;
}
div:after {
position: absolute;
content: '';
width: 0;
height: 0;
bottom: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 20px solid #3D6AB3;
-moz-transform: scale(0.999);
-webkit-backface-visibility: hidden;
}
<div></div>
This question already has answers here:
How to bevel the corner of a block div?
(4 answers)
Closed 8 years ago.
I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.
I am using css ...
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
...to 'skew' the rectangle to create the Parallelogram.
I am wondering if the right side can be made straight?
Would it require :before and :after in the css?
Any help of this would be great.
Thanks,
Phil
You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.
Option 1: (Using the border hack)
In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.
Change the below
border-color: transparent blue blue transparent;
to
border-color: transparent red red transparent;
Note: When using this method, it is difficult to add an extra outer border to the shape.
Snippet:
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: red;
margin-left: 50px;
color: white;
}
.trapezoid:after{
position: absolute;
content: '';
left: -50px;
top: 0px;
border-style: solid;
border-color: blue transparent blue transparent;
border-width: 100px 0px 0px 50px;
}
<div class="trapezoid">Some dummy text</div>
Option 2: (Using skew)
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: beige;
border: 1px solid red;
border-left-width: 0px;
margin-left: 50px;
}
.trapezoid:before{
position: absolute;
content: '';
left: -25px;
top: -1px;
height: 100px;
width: 50px;
background: beige;
border: 1px solid red;
z-index: -1;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
transform: skew(20deg);
}
<div class="trapezoid">Some dummy text.</div>
Add this id to any div youll see the expected result
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
height: 0;
width: 100px;
}
JSFIDDLe
I obtain jagged (pixeled) line when I am trying to create angle between two borders.
Please, consider the following code:
<div id="example"></div>
#example:before{
content: "";
position: relative;
width: 0;
height: 0;
left: 0;
bottom: -40px;
border-top: 20px solid black;
border-left: 470px solid red;
}
Here is a fiddle: http://jsfiddle.net/pan1cmode/bQYU7/2/
Any suggestions on how make it smooth?
Actually, what you want is called anti-aliasing, as Layne commented.
One way to get that, somehow, is using gradients.
demo
#Ex2 {
position: absolute;
height: 40px;
width: 470px;
top: 80px;
background: linear-gradient(3deg, red 39px, black 42px);
}
You can adjust the degree of smoothing by the difference between the red and the black stop. (in this case, between 39 and 42 px )
actually it is stretching because border-left value is value is very higher if you use equal values than you will solve this problem
http://jsfiddle.net/bQYU7/3/