Develop Reference

update css radius to straight line (jsfiddle attached) [duplicate]

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!

Enforce key size on virtual keyboard

This is the layout I am trying to achieve: https://jsfiddle.net/h0oa3Lps/ All keys are the same size.
In my application I have this code. The js is at the bottom of my jade file:
$('.keyboard')
.keyboard({
layout: 'custom',
customLayout: {
'default' : [
'1 2 3 {c}',
'4 5 6 {b}',
'7 8 9 {dec}',
'{left} {right} 0 {a}'
]
},
maxLength : 6,
restrictInput : true,
useCombos : false,
acceptValid : true,
validate : function(keyboard, value, isClosing){
// only make valid if input is between 0 and 100 inclusive
return value >= 0.0 && value <= 100.0;
}
})
.addTyping();
When using css/keyboard.min.css, the left arrow, right arrow and backspace keys are slightly larger than the other keys. Also the text positioning is off. Image:
If I switch to css/keyboard-basic.min.css the arrow keys are the same size as regular keys but the esc, backspace, and accept keys are twice the size as the regular keys. Also this takes up half of the screen (since it's not using the jquery-ui positioning). Image:
How do I enforce uniform key size?
If it makes any difference I am using Node, Express and Foundation v5.5.3 plus I have just updated to the latest versions of jQuery, jQuery-ui and jQuery.keyboard.

To fix this issue I copied the unminified css of keyboard.css to a keyboard-butchered.css. I then started experimenting with the styles in keyboard-basic.css and eventually came up with the following that partially answered my question:
.ui-keyboard {
/* adjust overall keyboard size using "font-size" */
font-size: 28px; /* increase button size for small screen */
text-align: center;
background: #fefefe;
border: 1px solid #aaa;
padding: 4px;
/* include the following setting to place the
keyboard at the bottom of the browser window */
left: 0px;
top: auto;
/*position: fixed;*/
position: absolute;
white-space: nowrap;
overflow-x: auto;
/* see issue #484 */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
I then mixed in the style for the keyboard button. This gives the correct style as seen in the jsfiddle demo (but jumbo sized).
.ui-keyboard-button {
border: 1px solid #aaa;
padding: 0 0.5em;
margin: 1px;
min-width: 3em;
height: 3em;
line-height: 3em;
vertical-align: top;
font-family: Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
background: white;
background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
background-image: linear-gradient(-90deg, white 0%, #e3e3e3 100%);
cursor: pointer;
overflow: hidden;
-moz-user-focus: ignore;
}

Hover not being detected on element

Picture:
What I want:
I want the hover to be registered even when the mouse cursor moves over that blue diamond shaped area in the picture above.
Problem:
Whenever I hover over that blue diamond shaped area, which visually appears to the user as a region in .path_part, the hover rule .folder_path .path_part:hover is not being applied on .part_part.
What I tried:
Set the z-index of .path_part to 10000 and that of .right_arrow to -1. Still no luck.
JSFiddle link

Working fiddle.
First of all, z-index can have a maximum value of 9999.
One thing to note is that only the left portion .right-arrow is overlapping with .path-part, and since the hover handler is on .path-part only that left portion will trigger the hover handler.
Also, for z-index to work both .path-part and .right-arrow need to be positioned, that is, position property set to either relative, absolute or fixed.
Change your CSS to:
.folder_path .right_arrow {
position: relative;
z-index: 1;
display: inline-block;
vertical-align: middle;
height: 35px;
width: 35px;
content: "";
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #000000), to(#000000));
margin-left: -25px;
}
.folder_path .path_part {
position: relative;
display: inline-block;
height: 50px;
line-height: 50px;
vertical-align: middle;
min-width: 40px;
font-size: 20px;
padding: 0 10px;
z-index: 2;
}

$(".path_part").hover(function(){
$(this).next().css({"background": "rgba(255, 255, 255, 0.3)"});
}, function(){
$(this).next().css({"background": "unset"});
});
You can use jquery.This code will work for you.

Making border-image work with gradients

I'm working on a webapp that uses react.js and sass for styles (so all my style files are .scss). I have a textbox with the current style:
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
At some point, my app wants to change the border colour. This is what I have for that:
var borderStyle;
if (gradient) {
borderStyle = {
'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
};
}
Later, the input component:
<input type="text" style={borderStyle} onChange={this.handleChange} />
Currently what I see is a white border with a tiny image of the red-blue gradient in each corner of the border. I've tried using borderColor, which doesn't work with gradients at all, apparently. Am I missing something obvious, or is it not possible to do a simple border gradient?
The desired result is a left-to-right gradient (so the left border is entirely blue, the right is entirely red, and the top and bottom borders feature the blue-to-red transition).
In response to Harry's answer, I changed to the following code:
if (gradient) {
borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: 1
};
}
as specified in the react docs for inline styles.
However when I inspect the element, the borderImageSlice property I've defined is missing; only the borderImage one is there, and I still only have tiny gradients in the corners of the border.

You need to add a border-image-slice property also while applying the border. Doing this would give the exact output as you need.
I have added it via CSS itself in the below snippet (without the JS) but you should be able to adapt it :)
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
border-image-slice: 1;
}
<input type="text" />
Note: I have also modified the gradient syntax to use the standard one so that it works in all browsers that support border-image property.
Below is a snippet which applies the border image when the text in the input box is changed.
var ip = document.getElementById("inp");
ip.addEventListener("change", function() {
this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
this.style.borderImageSlice = '1';
});
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
<input type="text" id="inp" />
It seems like ReactJS by default adds px as units to all numbers that are passed for inline styles and because of this the border-image-slice: 1 is wrongly getting set as border-image-slice: 1px. As this property is a unitless property in CSS, it is not getting applied properly. The solution is to wrap this value within quotes and also add a semi-colon within the quotes (like in the below code sample):
var borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: '1;' // note the quotes and the semi-colon.
};
Big credits for finding out this problem goes to Henrik Andersson.
JSBin Demo with ReactJS

I managed to fix such problem by adding 1 / 1 / 0 stretch by myself to the inline-style so it looks like this:
var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`

CSS triangle side with round on left? PART 2

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/