This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed last year.
I giving an indicator to menu items using border property and I want it to be rounded backwards as in the image below:
I tried using border-radius but this is the result:
Also feel free to suggest different approaches for implementing an indicator for sidebar menus in react since I'm not sure if this is possible using css properties.
Just use before and add an element to style
div {
position: relative;
display: inline-block;
background-color: blue;
width: 10em;
height: 10em;
}
div::before{
display: block;
position: relative;
content: '';
width: 10%;
top: 15%;
height: 70%;
background-color: white;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
<div></div>
Try using CSS-Tricks' Infinite Borders technique and applying border-radius. This method will require borders and box-shadow and not outline.
img { border-radius: 4px;
/* #1 */ border: 5px solid hsl (0, 0%, 40%);
/* #2 */ padding: 5px; background: hsl (0, 0%, 20%);
/* #3 outline: 5px solid hsl (0, 0%, 60%);
*/ /* #4 AND INFINITY......!!!
Mate, Atleast post your code with the question so that people can help you and advise you how to correct it.
P.S - I know this belongs in the comment and not an answer but I am new to Stack Overflow and I don't have points to comment on anything
Related
I want to change the color only of 1/3 of the bottom border and i want it to be changed only when someone clicks on the text (summer, spring or winter). Is it possible to do something like this with only CSS (with pseudo-elements like before or after) or do i have to use JS in this case?
HTML:
<div class="seasons">
<span id="text1">Summer</span>
<span id="text2">Spring</span>
<span id="text3">Winter</span>
</div>
CSS:
.seasons {
color: #B5BAB8;
display: inline-block;
margin: 10px;
border-bottom: 2px solid #B5BAB8;
padding-bottom: 15px;
margin-top: 465px;
}
.seasons span {
width: 250px;
display: inline-block;
}
Something like this could work using JS
CSS
.seasons {
color: #B5BAB8;
display: inline-block;
margin: 10px;
margin-top: 465px;
}
.seasons span {
width: 250px;
float: left;
padding-bottom: 15px;
border-bottom: 2px solid #B5BAB8;
}
.seasons span.highlighted {
border-bottom-color: red;
}
JS
$('.seasons span').on('click', function() {
$('.seasons span').removeClass('highlighted');
$(this).addClass('highlighted');
})
Edit: upps. I guess you want to change just 33% percentage of the full border. I thought you want to change 33% percentage of the each span elements border. Which has almost the same width the texts.
I tried your code on Codepen but, before suggestions, let me answer your question first:
Answer:
Yes you can -kinda- achive this without JS.
You have to use these following:
1. Linear gradient borders:
You can use
linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);
for your borders. That percentages may change as you like.
2. :active, :focus or :hover pseudo states for these spans:
You can change that gradient for click (:active) state.
linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 70%);
3. Adding effects:
You can also use
transition: all .3s ease-in-out;
for your effect.
But my suggestion:
Using :after element with position: absolute for :active state.
You can create an :after element for these spans' :active states like this:
span:active:after{
content:"";
display: block;
position: absolute;
bottom: 1px;
width: 100px;
height: 5px;
display: block;
}
You can add background to this pseudo element or you can also add normal border for this element.
If positioning not works, try position: relative for parents. This also requires display: block for spans.
Here a possibility without JS.
input[type="radio"] {
display: none;
}
label {
cursor: pointer;
border-bottom: 3px solid #0ff;
}
label:not(:last-child) {
margin-right: 1em;
}
input[type="radio"]:checked+label {
border-bottom: 3px solid transparent;
border-image: linear-gradient(to right, #f0f 0%, #f0f 33%, #3acfd5 33%, #fff, #3acfd5 34%, #0ff, 34%, #0ff 100%);
border-image-slice: 1;
}
<div class="seasons">
<form>
<input id="summer" name="season" type="radio" value="summer">
<label for="summer">Summer</label>
<input id="spring" name="season" type="radio" value="spring">
<label for="spring">Spring</label>
<input id="winter" name="season" type="radio" value="winter">
<label for="winter">Winter</label>
</form>
</div>
I want to style the "ending" of the current progress of the HTML5 progress bar by adding small black dot to it, see the screen. So this dot must move as progress moves
But the code I found here doesn't work anymore. It worked few weeks ago or so, but now it's not - see the codepen
Maybe someone knows what happened or how to achieve my goal?
Thanks a lot!
P.S. Here is the HTML/CSS I use
HTML:
<progress value="1400" max="4261"></progress>
CSS
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress[value]::-webkit-progress-value {
position: relative;
background: #00d38d;
}
progress[value]::-webkit-progress-value::after {
content: '';
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 15px;
border-radius: 50px;
background: black;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: #00D38D;
}
progress::-moz-progress-bar {
background-color: #00D38D;
}
You don't need a pseudo element to get this effect. Here it is using a gradient on the main style. (Tested only in Chrome)
progress {
/* Positioning */
position: absolute;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 50px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of the default border in Firefox/Opera. */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: #00D38D;
}
progress::-webkit-progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
progress::progress-value {
background-image: radial-gradient(circle at calc(100% - 30px) center, black 15px, lightgreen 15px);
}
<progress value="1400" max="4261"></progress>
I read here that the pseudo css appears not to work with the progress element:
I wish that I could have used :after (or ::after) rules instead, but
these pseudo-elements don’t work with the progress tags in any browser
that doesn’t use the polyfill. And no, :before doesn’t work either. I
have no idea why it doesn’t work, but it’s a shame — using them would
be perfect to get rid of the extra markup.
Found here: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
I'm not sure why it was working before, I haven't been able to find a non JS way to emulate the effect of using the ::after css.
Here's a codepen from that article you referenced where it's not working as well.
They appear to be using the same method as you and it has no function:
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo
elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
You may have to implement some sort of javascript or use a different method other than the HTML5 progress element to implement this.
Numbars has some similar stuff to what you're trying to do, but you may need to modify it a decent amount to get it functioning the way you want.
Sorry this isn't exactly a solution, but hopefully you can find a workaround that's not too tough to create.
This question already has answers here:
Box with Arrow top and Border
(4 answers)
Closed 8 years ago.
I want to make a curve in a border.. Like that when u click on a google apps button A pop-up window is open here is curve which point to the apps.. how to make this see the image..
Use pseudo elements to produce the triangle.
We can give a border to the triangle by using both the before and after pseudo elements - which act as 2 triangles - an outer one - with a color the same as the border color and an inner one - with a slight offset - with a color the same as the background of the widget.
In the following example, the before pseudo element is the 'outer' triangle and the after pseudo elemnt is the 'inner' triangle.
Markup
<p class="triangle-border">This only needs one HTML element.</p>
CSS
.triangle-border {
position: relative;
background: #fff;
border: 1px solid #c2c2c2;
width: 200px;
padding: 15px;
margin: 20px;
border-radius: 3px;
box-shadow: 0 2px 9px rgba(0, 0, 0, .3);
}
.triangle-border:before {
content:"";
position: absolute;
top: -10px;
left: 46px;
border-width: 0 10px 10px;
border-style: solid;
border-color: #c2c2c2 rgba(0, 0, 0, 0);
display: block;
width: 0;
}
.triangle-border:after {
content:"";
position: absolute;
top: -8px;
left: 47px;
border-width: 0 9px 9px;
border-style: solid;
border-color: #FFF rgba(0, 0, 0, 0);
display: block;
width: 0;
}
FIDDLE
Source: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
There are also generators for this like:
http://ilikepixels.co.uk/drop/bubbler/
http://cssarrowplease.com
http://html-generator.weebly.com/css-speech-bubble-generator.html
The usual method is to add before and after pseudo-elements that create CSS shapes using the border property, positioning them absolutely. If you want to fake a 'border' on the shape itself, you create two duplicate shapes (the before and after elements) with different colours, then offset them with the top or left properties.
I have following CSS class :
.acceptRejectAll a, .acceptRejectAll a:visited{
background-image: url("../images/view-patient.png");
background-position: left top;
background-repeat: no-repeat;
color: #4B555C;
float: left;
height: 35px;
padding-top: 12px;
text-align: center;
text-decoration: none;
width: 100px;
}
and following HTML :
<div style="float: none; display: inline-table" class="acceptRejectAll">
<a style="display:inline-block;height:25px;" href="#" class="fontBlack" id="ctl00_ContentPlaceHolder1_btnAcceptAll">Accept All</a>
</div>
this is display as follows :
when i decrease the size of in css class like : width : 85px
it displays as follows :
it cuts image from right side:
i tried to set background-Position in css class : but either left side or right side, image is not display correctly
wht is solution ?
Thanks
You will need to use background-size for this. Example:
background-size: 100% 100%;
Please note that this setting can scale your image to fill parent.
As the image is 100px (at least the visible part is about 92px so I guess the size is 100px) if you change the size of the button you need to scale the background image rather than change the position.
background-size:85px 35px;
Gradient and Border radius
Another way to approach this — considering the kind of button style you are using — is to go the gradient and border radius route. Whilst the code to use a css gradient looks rather messy, it is dynamically generated so you wont end up with stretched curved corners like you will using background-size.
Everything used below is pretty well supported now by most browsers. For anything that doesn't support the gradient you will get a solid blue background with curved corners instead, and it almost isn't worth worrying about non-support for border radius any more.
markup:
<div class="acceptRejectAll">
Accept All
</div>
css:
.acceptRejectAll {
display: inline-table;
border-radius: 20px;
text-align: center;
padding: 10px;
width: 100px; /* You can change the width as you like */
background: #c3e5fe; /* Old browsers */
background: -moz-linear-gradient(top, #c3e5fe 0%, #98d1fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3e5fe), color-stop(100%,#98d1fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c3e5fe 0%,#98d1fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #c3e5fe 0%,#98d1fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3e5fe', endColorstr='#98d1fd',GradientType=0 );
}
.fontBlack {
font-family: sans-serif;
font-size: 10pt;
color: black;
text-decoration: none;
}
The gradient was generated using:
http://www.colorzilla.com/gradient-editor/#c3e5fe+0,98d1fd+100;Custom
You end up with:
http://jsfiddle.net/NDHtn/
Or as a preview:
When you must use an image
If there is no other choice but to use an image as a background for a button — say, the graphics are too complicated to replicate using css effects — rather than use one image stretched and distorted to fit, you can use something like the following. There are many ways to essentially achieve the same result, I prefer to keep my mark-up simple and my css more complicated (rather than the other way around). However, to make things more supportive of the wider browser community you can break your mark-up into three parts, rather than make use of ::before and ::after:
markup:
<a class="button" href="#">
<span>Round Button with lots of text and then some</span>
</a>
css:
.button:before {
position: absolute;
content: '';
background: url('image.png') left top;
top: 0;
left: -50px;
width: 50px;
height: 99px;
}
.button:after {
position: absolute;
content: '';
background: url('image.png') right top;
top: 0;
right: -50px;
width: 50px;
height: 99px;
}
.button {
background: url('image.png') center -99px;
height: 99px;
margin: 0 50px;
position: relative;
display: inline-block;
color: white;
text-decoration: none;
}
.button span { display: block; padding: 35px 0px; }
image.png, hacked together using this original image and pixlr.com:
Which will give:
http://jsfiddle.net/2K5Kg/1/
Example mark-up without use of psuedo elements:
<a class="button" href="#">
<span class="before"></span>
<span class="after"></span>
<span>Round Button with lots of text and then some</span>
</a>
Then in the css just replace the .button:before with .button .before and the same for :after.
I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}