This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I have a jsfiddle link as follows
https://jsfiddle.net/utLhbc3g/
As you can see, i am trying to make a right angle triangle on the left side bottom of the box. but it shows a curve.
.box{
position:relative;
background:#fff;
display:block;
width:100px;
height:100px;
border-radius: 100% / 0 0 0 100px;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}
Can someone please let me know how to straighten that curve line.
Hmm. It's just not going to happen for you using border radius. Border radius applies rounding to corners. If we add a border we can see what's really happening here.
.box {
position: relative;
background: #fff;
display: block;
width: 100px;
height: 100px;
border-radius: 100% / 0 0 0 100px;
border: 5px solid black;
}
.box::before {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background: red;
content: "";
}
<div class="box"></div>
You have other options, however. CSS triangles provide a nice alternative.
.box {
width: 0;
height: 0;
border-style: solid;
border-width: 120px 0 0 120px;
border-color: transparent transparent transparent #4f46e5;
}
<div class="box"></div>
See here: https://www.fetoolkit.io/widget/css-triangle
You might also consider the clip-path property, depending on your use case.
clip-path: polygon(0 0, 0% 100%, 100% 100%) 👈 that will give you an equivalent object.
See here for a nice clip-path visualization tool (and it gives you code):
https://bennettfeely.com/clippy/
Good luck!
Related
I am attempting to make a page where the screen is split in half with two images from the bottom right corner to the top left corner
I have done this in CSS using transform: skewY( x amount deg);
I can then change this with javascript when the page loads by calculating the degree needed via trigonometry like so
var hlc = document.getElementById('homeleftside');
var hlch = hlc.clientHeight;
var hlcw = hlc.clientWidth;
var hlct = Math.atan(hlch/hlcw);
var hlca = hlct * 180 / Math.PI;
and I can do this via javascript every time the page is resized,
but to make this in CSS I have made these classes below and was wondering if there is a better alternative to a responsive degree amount depending on the page size due to editing the pseudo:: after element.
.homeleftside::after {
transform-origin: top left;
transform: skewY(-29deg);
content: '';
height: 100%;
width: 100%;
background: url("graphics/architecture.jpg");
color: #fff;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
overflow: hidden;
}
.homeleftside {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
transform-origin: top left;
transform: skewY(29deg);
}
As far as I know, your only posibility is with a mask-image.
Support is not fully, but it gives an easy way to achieve it.
Note that the direction "top left" (and similars) for a gradient will get you always the diagonal of the element
.test {
background-image: linear-gradient(red, green);
-webkit-mask-image: linear-gradient(to top right, black 50%, transparent 50%);
mask-image: linear-gradient(to top right, black 50%, transparent 50%);
}
#test1 {
width: 300px;
height: 200px;
}
#test2 {
width: 200px;
height: 200px;
}
<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
You can easily achieve this using clip-path
body {
margin:0;
height:100vh;
background:url(https://picsum.photos/id/10/800/800) center/cover;
}
body:before {
content:"";
display:block;
height:100%;
background:url(https://picsum.photos/id/18/800/800) center/cover;
-webkit-clip-path:polygon(0 0,0 100%,100% 100%);
clip-path:polygon(0 0,0 100%,100% 100%);
}
I have an image which goes from one side off the screen to other. However, when I open the HTML on a different sized computer/laptop, it does not fit and looks out of place. How do I fix this?
CODE:
body {
text-align: center;
}
div.container {
text-align: left;
width: 710px;
margin: 0 auto;
border: 12px solid black;
border-radius: 10px;
}
div.content {
width: 700px;
min-height: 400px;
background-color: white;
padding: 5px;
}
#-webkit-keyframes mini {
from {
left: 410px;
}
}
.mini {
position: absolute;
top: 280px;
left: 950px;
width: 166px;
height: 70px;
z-index: 10000;
-webkit-animation: mini 3s;
animation: mini 8s;
}
<div class="container">
<div class="content">
<img src="Media/buscartoon.jpg" class="mini" />
</div>
</div>
maybe set initial left and top values
.imganim {
width:100px;
height:60px;
position:absolute;
-webkit-animation:myfirst 5s;
animation:myfirst 5s;
left: 0;
top: 0;
}
Your .content and .container have no position set, so I guess it's defaulting to the next parent element that does have these set.
Pop this on your .content div:
position: relative;
the image is still going to go over the limits because of left: 100% but adding a relative position to the container may well help you get to the next problem.
If you want the image to sit flush with the edge of the container rather than running over, you can also change your left: 100% to:
left: calc(100% - 100px)
...where 100px is the width of the element.
edit: jsfiddle example https://jsfiddle.net/w56r2xnr/
Try the following css classes that i have ammended. I have kept the top at 5px which makes room for the 5px padding within the content div. Also the 50% transformation formal includes the left 100% - (width of the image + right-padding).
You can now adjust the top to make it as you see fit.
CSS changes:
div.content {
width: 700px; min-height: 400px;
background-color: white; padding: 5px;
position: relative;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst
{
0% {left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
/* Standard syntax */
#keyframes myfirst
{
0% { left:0%; top:5px;}
50% {left: calc(100% - 105px);}
100% {left:0%; top:5px;}
}
Sample: http://codepen.io/Nasir_T/pen/ZBpjpw
Hope this helps.
[Edit - Code changed in question]
I think in both scenarios you will need to set the content div with position:relative to keep the image contained within it as the image itself is position:absolute. Along with that you need to use percentage values for the left and top in order for the animation and the position to be in the right place regardless of the size of the screen.
For the updated code in question please check the following code sample:
http://codepen.io/Nasir_T/pen/ObRwmO
Just adjust the key frame left percentage according to your need.
Here's what I'm trying to draw with HTML and CSS:
I'm trying to drawn an arc with fill inside it, I've tried using border radius, here's how far I could come .
HTML Code:
<div class="box"></div>
CSS Code:
.box {
width:500px; height:100px;
border:solid 5px #f9955e;
border-color:#f9955e transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
Any help would be appreciated.
How about this:
.box{
position:relative;
background:#fff;
display:block;
width:100px;
height:100px;
border-radius: 50% / 100px 0 0 0;
}
.box::before{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#f9955e;
content:"";
}
It doesn't require any change to your html or have the need for a wrapping div. It's just pure CSS.
Here's the jsfiddle: https://jsfiddle.net/h2or0xa1/
Ok, so here's the explanation:
I got rid of your borders, we're not using those any more.
I've set the .box div to have a border radius that creates an arc on the left hand side (assume you know what this is as it's in your example). Set the background of the .box div to white.
Added a ::before pseudo element which essentially creates a div "over the top of" the .box div. To move it behind the div I positioned it absolutely and gave it a z-index of -1 which pushes is behind the .box div. The background colour of this ::before pseudo element is the orange you provided. Essentially the ::before pseudo element creates a div the same size as box, colours it, and pushes is behind .box
You can create the arc using a combination of square and circle overlapping it. The combination can be hidden within a container of half the width and half the height of the square/circle.
JSfiddle Demo
.container {
height: 75px;
overflow: hidden;
width: 75px;
}
.box {
width: 150px;
height: 150px;
background: orange;
position: relative;
z-index: -1;
}
.box::after {
position: absolute;
display: block;
content: " ";
border-radius: 50%;
background: white;
width: 100%;
height: 100%;
}
<div class="container">
<div class="box"></div>
</div>
This jsfiddle:http://jsfiddle.net/SDR2W/3/
Anyway, the sliders have a system so the top shade will never be darker than the bottom. But when you drag any of the ranges upward, at a value of 10, the sliders act weird, and i don't understand why. (the ranges are hidden on the side of the canvases) wondrin if any of you see the problem?
Thanks
<input type="range" class="vs1 vs" min="0" max="45" style="left:-89px;top:-12px" id="vs1" />
<input type="range" class="vs2 vs" min="0" max="45" style="right:-89px;top:-12px" id="vs2" />
<style>
input {
font-weight:bold;
font-family:arial;
outline:none;
}
input[type=range].vs {
-webkit-appearance: none;
background: none;
width: 200px;
height:28px;
-webkit-transform:rotate(90deg);
margin-top: 97px;
z-index: 10;
position: absolute;
border:1px solid rgba(0, 0, 0, 0);
opacity:0.4;
transition-duration: 1s;
}
input[type="range"].vs1::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: black;
width: 5px;
height: 15px;
border-top-right-radius:2em;
border-top-left-radius:2em;
position: relative;
top: 6px;
}
input[type="range"].vs2::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: black;
width: 5px;
height: 15px;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
position: relative;
bottom: 7px;
}
input[type=range]:hover.vs {
background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
border:1px solid black;
opacity:1;
}
input[type=range]:active.vs {
background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
border:1px solid black;
opacity:1;
}
</style>
You had this tagged as jQuery, so I have reduced & simplified it by somewhat actually using jQuery:
if (~~$('#vs1').val() > ~~$('#vs2').val()) {
if (qwas == 1) $('#vs2').val($('#vs1').val())
if (qwas == 2) $('#vs1').val($('#vs2').val())
}
jSFiddle: http://jsfiddle.net/TrueBlueAussie/ZYX8Y/3/
Note: ~~ converts a value to an integer (including strings). Much simpler & faster than parseInt()
Another note: At first I managed to easily break your code as there are no braces on the nested ifs... really bad practice for code maintenance.
You shouldn't compare strings directly. The value property gives you strings.
So "1" and "10" don't compare as you think.
To solve your problem use:
parseInt(obj.value, 10)
where obj is the DOM element you get with document.getElementById().
Use this everywhere, in the if() and in the get and set of your assignments.
This is what it should look like:
(source: kerrydeaf.com)
span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
Here is a jsfiddle:
http://jsfiddle.net/alma/zQKhb/2/
The problem is its hard to have rectangular box with corners to align the triangle as above?
It is for iphone app using Hybrid coding.
UPDATE: #andyb. Thank you for the update and this is what I see as below:
(source: kerrydeaf.com)
UPDATE: #andyb. It is now solved and a screen shot from iOS 6 stimulator.
(source: kerrydeaf.com)
UPDATE: Question: How do I move a yellow box down and touch the box a light blue box without leaving a gap?
(source: kerrydeaf.com)
UPDATE: Answer: It is now solved: added this margin-bottom:-8.5px on span.trig_italic2 CSS and it worked. (Image is not included)
Instead of creating a yellow triangle, how about creating a white triangle to chop off the end?
This does rely on making the <span> a bit wider, since the end will be taken up with the white triangle. So the span can be given display:inline-block in order for the width to take affect. I also had to give the height a smaller value and make the line-height equal to the font-size to keep the text vertically aligned in the middle of the block.
Edit: Since the background is a non-solid colour, an alternate approach would be to use a linear-gradient to chop off the end. The (slight) drawback to this approach is that the start of the chopping off point is hard-coded in the CSS and will not adapt to variable width content.
Updated demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height: 12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}
The original answer which works with solid colour backgrounds is left below.
Original demo (Webkit only)
span.trig_italic2 {
color:#000000;
line-height:12px;
font-size:12px;
font-family:opensansitalic;
width:136px;
display:inline-block;
height:12px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;
}
span.trig_italic2:after {
content:"";
display:block;
position: absolute;
right:0;
top:0;
width:0;
border:12px solid transparent;
border-color:#fff #fff transparent transparent;
}
​
The problem is in padding that increases box size unless you set box-sizing to border-box.
I would do this: http://jsfiddle.net/zQKhb/9/