Related
started to learn HTML and CSS, I want 4 blocks, 2 centred and 1 on each side, left and right. And if resize the window the block distance between the outer and inner blocks varies and the borders never cut each other
this is the full css code, I have the feeling I did this way too complicated.. I mean it works but yeah..
section {
display: inline-block;
position: relative;
width: 100vw;
height: 100vw;
background-color: blue;
}
.hm {
display: inline-block;
position: fixed;
top: 50%;
padding: 20px;
margin: 20px;
border: 10px solid yellow;
width: 60px;
height: 60px;
transform: translateX(-25%); translate: 10px;
}
.hm0 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid red;
width: 60px;
height: 60px;
transform: translate(-20px);
}
.hm1 {
display: inline-block;
position: fixed;
top: 50%;
left: 50%;
padding: 20px;
margin: 20px;
border: 10px solid rgb(211, 208, 208);
width: 60px;
height: 60px;
transform: translate(-100%); translate: -20px;
}
.hm2 {
display: inline-block;
position: fixed;
top: 50%;
right: 0;
padding: 20px;
margin: 20px;
margin-left: auto;
margin-right: 0;
border: 10px solid rgb(255, 0, 225);
width: 60px;
height: 60px;
}
<body>
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
</body>
I am not sure if this is what you are going for, but I have attempted to recreate it with Flexbox.
First, I wrapped the blocks that should be in the center in another div as follows:
<section>
<div class="hm box"> </div>
<div class="center">
<div class="hm0 box"> </div>
<div class="hm1 box"> </div>
</div>
<div class="hm2 box"></div>
</section>
I also added a class box that will contain the height and width of each box.
With that, I styled them like so:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
.center {
display: flex;
}
.hm {
border: 10px solid yellow;
}
.hm0 {
border: 10px solid red;
}
.hm1 {
border: 10px solid rgb(211, 208, 208);
}
.hm2 {
border: 10px solid rgb(255, 0, 225);
}
.box {
width: 60px;
height: 60px
}
The most important styles concerning the layout are here:
section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100vw;
height: 100vw;
background-color: blue;
}
display: flex;: aligns all blocks horizontally(except the blocks in the .center div, because they are not the section element direct children)
justify-content: space-between;: this pushes the first and last blocks to the edges of the section element, leaving the center div elements in the center.
align-items: center;: aligns all the horizontal blocks in the center of the section element.
Now since the blocks in the center div are not direct descendants of section element, I also used display:flex to align them horizontally:
.center {
display: flex;
}
To learn more about flexbox and its properties, check out flexboxfroggy
You can checkout the demo of the code here:
https://jsfiddle.net/stanulilic/s7oh4nv9/
To re-write your posted CSS in a more concise form leads us to the following, explanatory comments are in the CSS:
/* this is a personal style or affectation that I tend to list
CSS properties alphabetically, that way if you're looking to
see if a property is set I know where to find it, and if it's
not where I expect it to be I know it hasn't been set on that
element/selector. This is a personal style, it's not mandatory
it's probably not even 'best-practice,' but you'll help yourself
if you pick a particular approach and then stick with it: */
section {
background-color: blue;
display: inline-block;
height: 100vw;
position: relative;
width: 100vw;
}
/* the following selector matches the four <div> elements within the
<section> element, and the child combinator (the '>') prevents the
selector matching any <div> elements nested within those child
elements. This selector then applies all common CSS styles for all
the child elements, to avoid redeclarations: */
section > div {
/* all <div> elements have a 10px solid border, so here we apply
that border with the color set to 'transparent,' allowing us to
set the 'border-color' in the individual elements: */
border: 10px solid transparent;
display: inline-block;
height: 60px;
padding: 20px;
margin: 20px;
position: fixed;
top: 50%;
width: 60px;
}
.hm {
/* setting the border-color for this specific element: */
border-color: yellow;
/* the following translations were combined into one
'translate' declaration, using the calc() method:
transform: translateX(-25%);
translate: 10px;
*/
translate: calc(-25% + 10px);
}
.hm0 {
/* again, setting properties specific to the individual elements: */
border-color: red;
left: 50%;
translate: -20px;
}
.hm1 {
border-color: rgb(211, 208, 208);
left: 50%;
/* combining the two different translations into one single declaration
via translate: calc(...):
transform: translate(-100%);
translate: -20px;
*/
translate: calc(100% - 20px);
}
.hm2 {
border-color: rgb(255, 0, 225);
margin-left: auto;
margin-right: 0;
right: 0;
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
Things to learn from the above snippet/approach:
try to group all common styling together under one selector that can apply to the each element of a group as a whole, two
use the same properties to do the same thing; don't combine functions and properties such as – for example – transform: translate() (or translateX()) with translate,
if you find you're having to use a property/function and then use a different property/function to further adjust, consider looking for a way to combine the two adjustments into one (the calc() function being a much-used, and versatile, way of doing so),
try and adopt an approach of organising your code in such a way that it becomes easy and predictable to find a property-value pair in your code, particularly CSS, where it's incredibly easy to just add amendments or additions to the end of a rule-set.
Now, the above layout can be achieved more easily using either CSS flex layout, or CSS Grid.
First, flex-box:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
/* here we align the items within the <section> to the
vertical center; align-items works on the cross-axis
which is perpendicular to the main-axis; the main-
axis default is 'row' (so horizontal), therefore by
default 'align-items' positions the flex-items (the
elements within the flex-box) on the vertical axis:*/
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: flex;
/* positioning elements to the center on the main-axis,
horizontal by default: */
justify-content: center;
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
.hm {
border-color: yellow;
/* to move this element as far as possible to the inline-start
(the left, for European languages) we use the following to
add an auto-sized margin to the inline-end (in European
languages that's the 'right') side: */
margin-inline-end: auto;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
/* as above - for .hm - we want to move this element to the
inline-end (the 'right,' in European languages...) side,
so we again set an auto margin on the opposing side, the
'inline-start' ('left,' in European languages): */
margin-inline-start: auto;
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
And, finally, CSS Grid layout:
/* a simple CSS reset, to ensure all browsers size elements the same way,
using the border-box algorithm, to include borders and padding in the
declared sizing: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser-default margins and padding: */
margin: 0;
padding: 0;
}
section {
align-items: center;
background-color: blue;
block-size: 100vh;
/* specifying the flex-layout: */
display: grid;
grid-template-columns: repeat(4, 1fr);
}
section > div {
/* ensures that the element's width and height are equal: */
aspect-ratio: 1;
/* defining the borders of all elements matched by the
selector: */
border: 10px solid transparent;
/* defining the block-size of the matched elements; this is
a CSS logical property, and in European languages - and
others descended from those languages - is equivalent to
'height'; and the previous use of 'aspect-ratio'
automatically sets the 'inline-size' (equivalent to 'width'
in European languages and their descendants): */
block-size: 60px;
padding: 20px;
}
/* selecting the odd-numbered <div> elements within the <section>,
the first and third: */
section > div:nth-child(odd) {
/* positioning them to the inline-start by setting their
margin-inline-end (right, in European languages...) to
'auto': */
margin-inline-end: auto;
}
/* selecting the even-numbered <div> elements within the <section>,
the second and fourth: */
section > div:nth-child(even) {
/* positioning them to the inline-end, by setting the opposing
margin - margin-inline-start - to auto: */
margin-inline-start: auto;
}
.hm {
border-color: yellow;
}
.hm0 {
border-color: red;
}
.hm1 {
border-color: rgb(211, 208, 208);
}
.hm2 {
border-color: rgb(255, 0, 225);
}
<section>
<div class="hm"></div>
<div class="hm0"></div>
<div class="hm1"></div>
<div class="hm2"></div>
</section>
JS Fiddle demo.
References:
align-content.
align-items.
aspect-ratio.
background-color.
block-size.
border.
border-color.
box-sizing.
calc().
CSS Logical Properties.
display.
grid-template-columns.
height.
inline-size.
justify-content.
justify-items.
margin.
margin-block.
margin-block-end.
margin-block-start.
margin-inline.
margin-inline-end.
margin-inline-start.
padding.
padding-block.
padding-block-end.
padding-block-start`.
padding-inline-end.
padding-inline-start.
place-items.
repeat().
transform.
translate (CSS property).
translate() (CSS function).
width.
I need body to have a silver background and fill only 75% of the page. That is, only 75% of the page is painted silver, while the remaining part is unused and painted according to broswer's defaults. The left part of the page is my BODY, the right part is unused. I tried
body {
background-color: silver;
width: 75%;
}
But still the whole page is painted silver. How can I accomplish my task?
You would need to set the background color for both html and body.
In addition you have set a height of 100% to the html element and a min-height of 100% or 100vh to the body so that it will alway fill the whole height of the screen.
The padding: 0 and margin: 0 are important so that you won't have a border between your body and the window.
But be award that this will work only for modern browsers. I can't test older browsers right now, but it would assume that this will have problems with in IE below the version 9 or 10.
So if you want to support older browsers too, then you would need to use the solutions provided by the other answer and use a div as container for your content.
html {
background-color: white;
height: 100%;
padding: 0;
}
body {
background-color: silver;
width: 75%;
min-height: 100%;
margin: 0;
}
div {
height: 500px;
width: 50px;
background-color: red;
}
<div>
test
</div>
Thats not how it Works.
U might use a container as
<div id="container"></div>
#container{
background-color: silver;
width: 75%;
}
You have to use a container div for this purpose:
body {
padding: 0;
margin: 0;
}
div {
min-height: 100vh;
background-color: silver;
width: 75%;
}
<div></div>
Another approach (if you don't need the right border for the content) would be to use background gradients:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: -webkit-linear-gradient(left, silver 0%, silver 75%, white 75%);
background: linear-gradient(to right, silver 0%, silver 75%, white 75%);
}
I wondered if it was possible to create two background-colors for a div an overlay them.
I want a white background-color so that the content below this div doesn't shine through and another rgba() color painted over this white to create lighter colors per script.
Without understanding why you want this, it can be done by using solid color gradients: fiddle.
body {
background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
linear-gradient(white, white); /* first bg is on top of this */
}
Though Adrift's answer is the way to go, you can also use pseudo elements for this.
body {
background: white;
position: relative;
}
body:before {
content: "";
position: absolute;
top: 0;
left; 0;
width: 100%;
height: 100%;
background: rgba(220,14,120,0.5);
z-index: 1;
}
/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
z-index: 2;
position: relative;
}
Here is a fiddle.
However, this is not production friendly:
Setting position relative on body and all other elements when not necessary
Setting unnecessary z-index on all elements
The only upside this method has, is that it doesn't use gradients which, from a semantic standpoint, is more logical.
You can't define two background-colors for one element, but you could overlay one coloured element on top of a white one in order to get a blending effect, while blocking out anything below them:
JSFiddle
HTML
<div class="one">
<div class="two"></div>
</div>
CSS
div {
width: 100px;
height: 100px;
}
.one {
background-color: #fff;
}
.two {
top: 0;
left: 0;
background-color: rgba(0,0,255,0.2);
}
To answer your question, yes there is a way. You can use a background image and a background color on the same div. Check out this SOF post.
Although I would consider a different method like this:
Structure:
<div class="parent">
<div class="white"></div>
<div class="color"></div>
</div>
CSS:
.parent {
position: relative:
}
.white, .color {
position:absolute;
top: 0px;
left: 0px;
}
.white {
z-index: 9998;
}
.color {
z-index: 9999;
}
You can mess around with the details here, but the overall idea is that your layer the divs on top of each other. The div with the higher z-index will be on top. Change their colors accordingly. The parent div being relative will keep the absolute divs inside of that container.
To achieve multiple background colors in CSS, a common proposal is
Solid Color Gradients
But there is an alternative:
Solid Color background-images via SVG Data URIs
The working example below contains the following areas with the following background colors:
<main> - dark-gray
<section> - light-gray
<div class="circle"> - translucent red
In this set-up, we want to use the same theme-color for all the circles, rgba(255, 0, 0, 0.5) but we also want the circles inside the <section> to appear to have the same background-color as the circle outside <section>.
We can observe that, due to the application of the technique below to div.circle.does-not-blend - the rightmost of the two circles inside <section> - that circle ends up with the same apparent background-color as div.circle outside <section>.
The Approach
The approach is to give div.circle.does-not-blend:
the same initial background-color as <main>
an SVG Data URI background-image with the same translucent red background-color as the other .circle elements
The SVG background-image
The SVG Data URI background-image looks like this:
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E
The Result
In the final result we see that the light-gray background-color of <section> does not bleed through and influence the final background-color of div.circle.does-not-blend
Working Example
main {
display: flex;
justify-content: space-around;
align-items: center;
height: 180px;
padding: 0 9px;
background-color: rgb(127, 127, 127);
border: 1px solid rgb(0, 0, 0);
}
section {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0 0 66%;
background-color: rgb(191, 191, 191);
height: 162px;
}
.circle {
display: inline-block;
width: 120px;
height: 120px;
color: rgb(255, 255, 255);
text-align: center;
line-height: 120px;
background-color: rgb(255, 0, 0, 0.5);
border-radius: 50%;
}
.circle.does-not-blend {
background-color: rgb(127, 127, 127);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" style="background-color:rgba(255, 0, 0, 0.5);"%2F%3E');
}
<main>
<div class="circle"></div>
<section>
<div class="circle">Incorrect</div>
<div class="circle does-not-blend">Correct</div>
</section>
</main>
I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.
I think using a background gradient with a hard transition is a very clean solution:
.diagonal-split-background{
background-color: #013A6B;
background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Here are the examples in action: http://jsbin.com/iqemot/1/edit
You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.
HTML:
<div id="container"></div>
CSS:
#container {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
background-color: grey;
}
#container:before {
content: '';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: rgb(255, 255, 255); /* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
JSFiddle
I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.
A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.
JSFiddle
Resources:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Using jQuery how to get click coordinates on the target element
This method words on different sized windows and fills the screen. Even works on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Diagonal</title>
<style>
*{
margin: 0;
padding: 0;
}
.diagonalimg{
width: 100%;
height: 100vh;
background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
}
</style>
</head>
<body>
<div class="diagonalimg">
</div>
</body>
</html>
This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by #timlg07
.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Method 1:
<div class="triangle"></div>
body {
margin: 0;
}
.triangle {
background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
height: 100vh;
}
https://codepen.io/x-x00102/pen/ZEyEJyM
Method 2:
<div class="triangle"></div>
body {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
}
.triangle::after {
content: '';
position: absolute;
border-top: 100vh solid LightGray;
border-right: 100vw solid Salmon;
}
https://codepen.io/x-x00102/pen/VwWwWGR
Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.
The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).
/* Cruft for the demo */
body {
margin: 0;
padding: 0;
}
.gray-block {
background-image: linear-gradient(to bottom right, #000, #ccc);
color: #fff;
}
.gray-block__inner {
padding: 20px;
}
/* The actual solution */
.diagonal-end::after {
content: "";
display: block;
margin-top: -6vw; /* optionally move the diagonal line up half of its height */
border-top: 12vw solid transparent; /* change 12vw to desired angle */
border-bottom: 0px solid transparent;
border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
<div class="gray-block__inner">
<span>Some content</span>
</div>
</div>
Is there any way to limit the length of a border. I have a <div> that has a bottom border, but I want to add a border on the left of the <div> that only stretches half of the way up.
Is there any way to do so without adding extra elements on the page?
CSS generated content can solve this for you:
div {
position: relative;
}
/* Main div for border to extend to 50% from bottom left corner */
div:after {
content: "";
background: black;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
<div>Lorem Ipsum</div>
(note - the content: ""; declaration is necessary in order for the pseudo-element to render)
#mainDiv {
height: 100px;
width: 80px;
position: relative;
border-bottom: 2px solid #f51c40;
background: #3beadc;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
<div id="mainDiv">
<div id="borderLeft"></div>
</div>
The ::after pseudo-element rocks :)
If you play a bit you can even set your resized border element to appear centered or to appear only if there is another element next to it (like in menus). Here is an example with a menu:
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
}
#menu > ul > li + li::after {
content:"";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
#menu > ul > li {
position: relative;
float: left;
padding: 0 10px;
list-style: none;
}
#menu > ul > li + li::after {
content: "";
background: #ccc;
position: absolute;
bottom: 25%;
left: 0;
height: 50%;
width: 1px;
}
<div id="menu">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
With CSS properties, we can only control the thickness of border; not length.
However we can mimic border effect and control its width and height as we want with some other ways.
With CSS (Linear Gradient):
We can use linear-gradient() to create a background image(s) and control its size and position with CSS so that it looks like a border. As we can apply multiple background images to an element, we can use this feature to create multiple border like images and apply on different sides of element. We can also cover the remaining available area with some solid color, gradient or background image.
Required HTML:
All we need is one element only (possibly having some class).
<div class="box"></div>
Steps:
Create background image(s) with linear-gradient().
Use background-size to adjust the width / height of above created image(s) so that it looks like a border.
Use background-position to adjust position (like left, right, left bottom etc.) of the above created border(s).
Necessary CSS:
.box {
background-image: linear-gradient(purple, purple),
// Above css will create background image that looks like a border.
linear-gradient(steelblue, steelblue);
// This will create background image for the container.
background-repeat: no-repeat;
/* First sizing pair (4px 50%) will define the size of the border i.e border
will be of having 4px width and 50% height. */
/* 2nd pair will define the size of stretched background image. */
background-size: 4px 50%, calc(100% - 4px) 100%;
/* Similar to size, first pair will define the position of the border
and 2nd one for the container background */
background-position: left bottom, 4px 0;
}
Examples:
With linear-gradient() we can create borders of solid color as well as having gradients. Below are some examples of border created with this method.
Example with border applied on one side only:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, calc(100% - 4px) 100%;
background-position: left bottom, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Example with border applied on two sides:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
background-position: left bottom, right top, 4px 0;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Example with border applied on all sides:
.container {
display: flex;
}
.box {
background-image: linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(purple, purple),
linear-gradient(steelblue, steelblue);
background-repeat: no-repeat;
background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
background-position: left bottom, left bottom, right top, right top, 4px 4px;
height: 160px;
width: 160px;
margin: 20px;
}
.gradient-border {
background-image: linear-gradient(red, purple),
linear-gradient(to right, purple, red),
linear-gradient(to bottom, purple, red),
linear-gradient(to left, purple, red),
linear-gradient(steelblue, steelblue);
}
<div class="container">
<div class="box"></div>
<div class="box gradient-border"></div>
</div>
Screenshot:
for horizontal lines you can use hr tag:
hr { width: 90%; }
but its not possible to limit border height. only element height.
Another way of doing this is using border-image in combination with a linear-gradient.
div {
width: 100px;
height: 75px;
background-color: green;
background-clip: content-box; /* so that the background color is not below the border */
border-left: 5px solid black;
border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
border-image-slice: 1;
}
<div></div>
jsfiddle: https://jsfiddle.net/u7zq0amc/1/
Browser Support:
IE: 11+
Chrome: all
Firefox: 15+
For a better support also add vendor prefixes.
caniuse border-image
Borders are defined per side only, not in fractions of a side. So, no, you can't do that.
Also, a new element wouldn't be a border either, it would only mimic the behaviour you want - but it would still be an element.
This is a CSS trick, not a formal solution. I leave the code with the period black because it helps me position the element. Afterward, color your content (color:white) and (margin-top:-5px or so) to make it as though the period is not there.
div.yourdivname:after {
content: "";
border-bottom: 1px solid grey;
width: 60%;
display: block;
margin: 0 auto;
}
Article about this issue: https://www.steckinsights.com/shorten-length-border-bottom-pure-css/
Another solution is you could use a background image to mimic the look of a left border
Create the border-left style you require as a graphic
Position it to the very left of your div (make it long enough to handle roughly two text size increases for older browsers)
Set the vertical position 50% from the top of your div.
You might need to tweak for IE (as per usual) but it's worth a shot if that's the design you are going for.
I am generally against using images for something that CSS inherently provides, but sometimes if the design needs it, there's no other way round it.
You can define one border per side only. You would have to add an extra element for that!