Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
In IE(>9) and Microsoft Edge,border-radius have a bugs when border-width is very wide.
.number {
display: inline-block;
position: relative;
left: -3px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ff7322;
border-radius: 50px;
border: 8px solid #f0f0f0;
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
}
<span class="number">1.1</span>
its bug it IE
There is a workaround for these issues: element can be replaced with two nested elements, where the inner element has the desired background color as its background while the outer element’s background color is equal to the desired border color, and the outer element has padding equal to the desired border width.
HTML
<div class="ok"><div>…</div></div>
CSS
.ok {
background: #000; /* Border color */
border-radius: 100px;
padding: 70px; /* Border width */
}
.ok > DIV {
background: #fff; /* Background color */
border-radius: 30px; /* Radius of outer element minus border width */
height: 60px; /* For illustration purposes */
}
Example and source :
http://tanalin.com/_experimentz/demos/blog/2011/border-radius-rendering/
Related
This question already has answers here:
Thick underline behind text
(7 answers)
Closed 1 year ago.
I'm using Foundation 6 (just a little bit of background) and in a project, several titles are styled this way:
the title with a blue border
You can ignore the brigther blue background. It's possible to make that border that covers the title using anything in CSS? I'm currently using this file as a SVG, but I know this is not SEO/acessible friendly, and I really think .svg is more a hack than the actual solution.
I don't know if the solution resides on:
border-bottom: solid 1px blue;
Or something else?
https://jsfiddle.net/32yahu0v/
h1::before{
z-index: -1;
content: " ";
width: 120px;
position: absolute;
padding-top: 20px;
border-bottom: 15px solid blue;
}
<h1>
My Title
</h1>
You can use border-bottom for that to work, but there will be a gap.
If you want the line to go through the the text, you could try and use a :before or :after pseudo element on the title
here is a codepen https://codepen.io/Spoochy/pen/QWGPoPZ
/* the styling that you actually need */
p {
position: relative;
}
p:after {
content: '';
background: blue;
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 10px;
z-index: -1;
}
/* styling to make everything prettier and you don't need*/
body {
background: #29b5e8;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
p {
color: white;
font-size: 35px;
font-family: sans-serif;
position: relative;
}
<p>conectamos</p>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i want to code a box like this
and completely using css and other web language ,
not the thing like svg ,
is it possible ?
it is simple when it's cuppy
but the problem is when convex
may some one help me?
The .rect::after has border-radius: 50% and a very long white shadow that will be visible only inside the .rect since the .rect element has overflow:hidden.
For the rect's shadow I'm using filter:drop-shadow(1px 1px 3px #000)
.rect {
position: relative;
height: 100px;
width: 300px;
margin:2em auto;
overflow:hidden;
filter:drop-shadow(1px 1px 3px #000)
}
.rect::after {
content: '';
border-radius: 50%;
background:transparent;
box-shadow: 0 0 0 60vw white;
display: block;
width: 100%;
height: 50px;
position: absolute;
left: 0px;
bottom:-25px;
}
<div class="rect"></div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm trying to code a striped triangle in CSS, which will be a resize icon as you can normally find in the lower right of a window such as this one:
I tried using repeating-linear-gradient and creating a triangle with the div-border trick, but I can't combine those, as the triangle is made from borders, and the gradient is for background.
So how do I get a div that looks like the image? I can't find anything helpful on google or here on stackoverflow.
Any help is highly appreciated :)
I would use box shadow on pseudo element to create 3 strips, and rotate it to bottom right corner
.strip_tri {
width: 20px;
height: 20px;
position: relative;
overflow: hidden;
}
.strip_tri::after {
content: '';
position: absolute;
display: block;
width: 50px;
height: 0;
box-shadow: 0 10px 0 1px black, 0 17px 0 1px black, 0 24px 0 1px black;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
top: 50%;
left: 50%;
}
<div class="strip_tri"></div>
I used the links you provided to make this:
#a {
background: repeating-linear-gradient( -45deg, #fff, #fff 2px, #000 2px, #000 3px);
width: 20px;
height: 20px;
}
#b {
width: 0;
height: 0;
border-right: 25px solid transparent;
border-bottom: 25px solid transparent;
border-top: 25px solid #fff;
}
<div id="a">
<div id="b">
</div>
</div>
Of course, you can change the size of the div and the stripes to whatever you please.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How to make border-bottom inside block after hover event?
I tried this using text-shadow, but seems it is not solution
An inset box shadow seems to be what you require
div {
height: 75px;
background: #c0ffee;
}
div:hover {
box-shadow: inset 0 -5px 0 red;
}
<div></div>
OR
Use a pseudo-element
div {
height: 75px;
background: #c0ffee;
position: relative;
}
div:hover::after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 5px;
background: red;
}
<div></div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Improve this question
How can I create a 2 color border like this around an image?
Like this:
This is for an HTML website. What CSS should I use? Thanks in advance :)
Fiddle Link
CSS
#mainDiv {
height: 200px;
width: 560px;
position: relative;
border-bottom: 8px solid #f51c40;
background: #3beadc;
border-top: 4px solid yellow;
}
#borderLeftbottom {
border-left: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
#borderRightbottom{
border-right: 8px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
right:0;
}
#borderLefttop {
border-left: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
}
#borderRighttop{
border-right: 4px solid yellow;
position: absolute;
top: 0;
bottom: 50%;
right:0;
}
HTML
<div id="mainDiv"><img src="https://www.google.com/images/srpr/logo11w.png" alt="google" />
<div id="borderLeftbottom"></div>
<div id="borderRightbottom"></div>
<div id="borderLefttop"></div>
<div id="borderRighttop"></div>
</div>
Fully reusable solution for any image - just need to wrap it with a div with class .multipleBorder
FIDDLE
1) Wrap the image in a div.
2) Give the div padding: say 12px - 10px for outer border and 2px for inner border
3) Create pseudo elements :before and :after the div - each with 50% height
4) Set a border and background for each pseudo element (background is used as inner border)
5) Remove the bottom border of the top element and the top border of the bottom element.
Done!
Markup
<div class="multipleBorder">
<img src="http://placehold.it/600x150" alt="" width="600px" height="150px" />
</div>
CSS
.multipleBorder
{
position: relative;
display: inline-block;
padding: 12px;
}
.multipleBorder:before, .multipleBorder:after
{
content: '';
position: absolute;
top:0;
left:0;
width:100%;
height: 50%;
border: 10px solid silver;
border-bottom: none;
background: maroon;
z-index: -1;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.multipleBorder:after
{
bottom:0;
top: auto;
border: 10px solid maroon;
border-top: none;
background: silver;
}