This question already has answers here:
How to increase space between dotted border dots
(20 answers)
Closed 4 years ago.
How can I achive this kind of border? This 20px dash and 20px spacing between dashes. Is it even possible without custom background file? The closest i can get is something like this:
.element {
width: 600px;
height: 300px;
border-radius: 45px;
background-image: linear-gradient(to right, red 50%, white 50%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
}
<div class="element">
TEXT TEXT
</div>
live: https://jsfiddle.net/roo5rbb3/
Try this:
border-style: dashed;
So your complete css will look like this:
.element {
width: 600px;
height: 300px;
border-radius: 45px;
background-image: linear-gradient(to right, red 50%, white 50%);
background-position: top;
background-size: 10px 1px;
background-repeat: repeat-x;
border-color: red;
border-width: 2px;
border-style: dashed;
}
Related
I want to create a custom scrollbar with the ::-webkit-scrollbar* selectors, but I think the answer can also be used for any other container.
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: url('https://svgshare.com/i/bqE.svg') right 2px center no-repeat;
background-size: 10px 100%;
width: 15px;
}
::-webkit-scrollbar-thumb {
background-image: url('https://svgshare.com/i/brF.svg'),
url('https://svgshare.com/i/brD.svg'),
url('https://svgshare.com/i/bqv.svg');
background-position: right top,
right bottom,
right 15px;
background-repeat: no-repeat,
no-repeat,
no-repeat;
background-size: 15px 15px,
15px 15px,
15px 100%;
}
#scroll {
height: 400px;
width: 200px;
border: 1px solid black;
overflow-y: scroll;
}
div > div {
height: 1000px;
}
<div id="scroll">
<div>Inner Container</div>
</div>
The example is a little problematic because of the missing images. The goal is to have a top and a bottom area of 15x15px where the "top"/"bottom"-background is shown.
The problem is: The streched image in the middle need to have a 15px offset from top AND 15px from bottom. It's easy to have the top OR bottom offset, but I don't know how to get both. The middle image does have curves (comic look) and has to perfectly fit (as it's the case when using border-image*).
Is there any way to accomplish this? I also tried to solve the problem with border-image* properties, but this does not seem to work for scrollbars.
EDIT: Here is an example of the images. I don't know where to upload svg graphics for embedding.
EDIT 2: Added images. You can the the problem at the bottom of the scrollbar. The stretched, middle part, needs an offset of 15px from top and bottom.
Update your code like below:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background: url('https://svgshare.com/i/bqE.svg') right 2px center no-repeat;
background-size: 10px 100%;
width: 15px;
}
::-webkit-scrollbar-thumb {
background:
url('https://svgshare.com/i/brF.svg') top,
url('https://svgshare.com/i/bqv.svg') center,
url('https://svgshare.com/i/brD.svg') bottom;
background-repeat: no-repeat;
background-size: 100% 15px,100% calc(100% - 30px);
}
#scroll {
height: 400px;
width: 200px;
border: 1px solid black;
overflow-y: scroll;
}
div > div {
height: 1000px;
}
<div id="scroll">
<div>Inner Container</div>
</div>
I am trying to create an element which is a half-circle with a complete circle border. Like this:
I have no problem doing it with using 2 elements, but don't fully understand how to do it within one DIV.
Right now all I have is a half circle:
.element {
height: 10px;
width: 10px;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
background-color: #00a680;
}
You can simply use gradient:
.box {
width: 150px;
height: 150px;
border: 15px solid #00a680;
border-radius: 50%;
padding: 15px;
background: linear-gradient(to right, #00a680 50%, transparent 0) content-box;
box-sizing:border-box;
}
<div class="box">
</div>
I'm trying to make a triangle in CSS that takes the whole width of the parent with a fixed height.
I successfully did so with a linear-gradient like this:
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
<div class="triangle"></div>
But the diagonal doesn't look crisp. How could I do the same in CSS without using gradient?
You can blur the edge a bit
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 49.5%, transparent 50%);
}
<div class="triangle"></div>
the border approach as mention could be done this way to be similar :
.triangle {
width:0;
border-style:solid;
border-width: 0px 0px 120px 100vw;
border-color:transparent transparent transparent blue ;
}
<div class="triangle"></div>
Best is to use an SVG ....
The trick is to make a triangle out of the border. Since CSS does not allow using percentage in border-width, I'm using 100vh instead of 100%.
Please try this:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0px 0px 120px 100vw;
border-color:transparent transparent transparent blue ;
}
Why dont you try without gradient property using border-width.I have implemented one using border-width which gives the boundaries more crisp. Here is the runable version.
.triangle {
width: 100%;
height: 120px;
background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
.container{
width : 300px;
}
.triangleUsingbordermethod {
border-top-color: blue;
border-top: 60px solid blue;
border-left: 50% solid black;
border-left: 150px solid blue;
border-right: 150px transparent solid;
border-bottom: 60px transparent solid;
}
<div class='container'>
<div class="triangleUsingbordermethod"></div>
</div>
Hi all,
I would like to insert a <button> in my code that has a gap in border-top and border-bottom. I have seen some examples where it is possible to remove a part with it, but it's not exactly what I am looking for. Do you have an idea on how to get something like the above mentioned picture?
Thanks in advance for your replies!
EDIT:
I add more information: the best is that the background of the button is transparent and that the border-size is customisable.
Use pseudo elements
.brd {
font-size: 30px;
padding: 4px 20px;
position: relative;
border: none;
background-color: white;
}
.brd:before,
.brd:after {
content: ' ';
position: absolute;
border: 1px solid black;
top: 0;
bottom: 0;
width: 10px;
}
.brd:before {
border-right: 0;
left: 0;
}
.brd:after {
border-left: 0;
right: 0;
}
<span class="brd">Title</span>
<button class="brd">Title</button>
Another possible solution is to use gradient as border-image. Look at the snippet below
.box{
display:inline-block;
margin: auto;
padding: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
-webkit-border-image: -webkit-linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image: linear-gradient(to right, #aaa 10%, #fff 10%, #fff 90%, #aaa 90%);
border-image-slice: 1;
}
<div class="box" >TITLE HERE</div>
If you want the top and bottom border parts to be exactly X pixels, you can change the percents with pixels like this:
border-image: linear-gradient(to right, #aaa 20px, #fff 20px, #fff calc(100% - 20px), #aaa calc(100% - 20px));
A simple way would be using a custom made image as the background of your button, tho it wouldn't scale well on different screen sizes.
Another idea would be to have a div underneath with a normal border, and then your smaller button on top of it, with the same height and a white border, so as to hide the top and bottom part.
I've created a JSFiddle for you: enter link description here
HTML:
<div class="back-with-border">
<div class="front-no-border">
Title Here
</div>
</div>
CSS:
.back-with-border{
border:1px solid gray;
width:200px;
height:100px;
position: relative;
}
.front-no-border{
display:flex;
justify-content:center;
align-items:center;
border:0px;
background-color:white;
position: absolute;
width:110px;
height:110px;
top:-1px;
left:45px
}
Check this [JSFiddle][1], hope this will solve your problem
body {
background-color: white;
}
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
position: relative;
background-color: white;
}
.child {
display: flex;
justify-content: center;
align-items: center;
border: 0px;
background-color: white;
position: absolute;
width: 150px;
height: 103px;
top: -1px;
left: 25px
}
<div class="parent">
<div class="child">
Write your text here
</div>
</div>
[1]: https://jsfiddle.net/anshul24mehta/eocst0uv/3/
This question already has answers here:
How to center the <legend> element - what to use instead of align:center attribute?
(10 answers)
Closed 7 years ago.
How to put some text on a border div so that text has a transparent background that it matches the image behind?
The problem is that the background-image has some shapes and multiple colors, so I can't put just some background color the the text because it won't fit.
Example:
html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
background: url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg);
}
#main {
margin-top: 100px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #000000;
}
#main h2 {
font-size: 60px;
font-weight: 700;
text-align: center;
margin: -40px 0 0;
background: transparent; /* somehow remove the border behind the text */
padding: 0 20px;
}
<div id="main">
<h2>Star players</h2>
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</div>
JSFiddle
You can use a fieldset instead of a div:
HTML:
<fieldset>
<legend>Test</legend>
</fieldset>
CSS:
legend {
text-align: center;
width: 100%;
}
So you want to see one thing 2 layers behind the text but not the other thing that is between the two...that in itself is rather counter-intuitive. Not sure you will be able to do it unless you use a border image and css gradient which is always a little complicated and this won't be dependant on the size/width of the text.
e.g.
HTML
<div class="gradborder-box"><div class="inner"><h2>Hello WORLD</h2></div></div>
CSS
.gradborder-box{
margin: auto;
width: 350px;
background: transparent;
border: 2px solid transparent;
-webkit-border-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
border-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 68%, rgba(0,0,0,1) 100%);
border-image-slice: 1;
}
h2{font-size: 1.2em; text-align: center; margin-top: -10px;}
.inner{height: 150px; width: 100%; border-bottom: 2px solid #000; margin-bottom: -2px;}
CodePen
This has been done for CHROME - you will need to add in the correct border image tags for the other browsers (-moz-border-image, etc). This is CSS3 only.