Is it possible to set repeat red line to its outer div at end of the page?
Here is the image click here
.crossline {
width: 2px;
height: 10px;
border-bottom: 1px solid red;
-webkit-transform:
translateY(-20px)
translateX(5px)
rotate(27deg);
position: relative;
}
This is something you could do, using repeating linear gradients.
div {
width: 100px;
height: 600px;
background: repeating-linear-gradient(45deg, #ff0000, #ff0000 1px, #ffffff 1px, #ffffff 10px);
}
<div></div>
Related
I'm trying to create two half circles (each with a different color) which together form one circle. Something like this
DEMO
I created this using 2 elements and a bit of css:
<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>
and
$size: 100px;
$border: 20px;
...
.half-right-circle {
border-top-right-radius: $size + $border;
border-bottom-right-radius: $size + $border;
border: $border solid green;
border-left: 0;
}
.half-left-circle {
border-top-left-radius: $size + $border;
border-bottom-left-radius: $size + $border;
border: $border solid red;
border-right: 0;
}
Although this is exactly what I need, I was wondering if this can be achieved with just one html element (without pseudo elements of course :) ?
Here is a working snippet of what I'll do, using border:
% values instead of px for border-radius, it simplifies a lot!
border-color to add the correct color for each side.
transform: rotate(45deg); to turn it like you want.
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: 200px;
width: 200px;
border: 20px solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
<div class="halves-circle">
⋅
⋅
⋅
We could use some CSS variables too, if you want to make many of them:
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: var(--size);
width: var(--size);
border: var(--border) solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
#hc1{
--size: 100px;
--border: 20px;
}
#hc2{
--size: 60px;
--border: 30px;
}
#dot{ /* We can even do this! */
--size: 0px;
--border: 20px;
}
<div class="halves-circle" id="hc1"></div>
<div class="halves-circle" id="hc2"></div>
<div class="halves-circle" id="dot"></div>
Hope it helps.
Here is a more simple solution with only 2 gradient and less of code:
.circle {
margin:20px;
border-radius:50%;
width:200px;
height:200px;
background:
radial-gradient(circle at center,white 60%,transparent 60.5%),
linear-gradient(to right,red 50%,green 0);
}
body {
background-color:pink;
}
<div class="circle">
</div>
Please try this code
body {
background: #ccc;
}
.circle {
margin: 25px 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px solid transparent;
background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(360deg, green 100%, lightgrey 100%),
linear-gradient(360deg, red 100%, lightgrey 100%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
transform: rotate(90deg);
}
<div class="circle">
</div>
Fiddle: http://jsfiddle.net/66r7nj4x/
I'm trying the find a way to have a dynamic border with a triangle. For the moment, with the basic gradient effect, this is what I did:
My current effect in action
But as you can see, the background has a gradient and we can see the border background that does not match..
How can I achieve this effect? Also, the text may vary on different screen size and with other words.
Thank you!
Using pseudo-elements and skewX is one clean way to achieve this. Check this out, I'm using a top, left & right border on the element, and then style the before as the left bottom border and the after as the right one:
body {
background-color: white;
background-image: linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, #999 75%, #999);
background-size: 10px 10px;
background-position: 0 0, 50px 50px;
}
.dialog {
text-align: center;
color: green;
font-size: 65px;
width: 300px;
height: 120px;
background-color: transparent;
border-width: 5px 5px 0 5px;
border-color: red;
border-style: solid;
display: inline-block;
position: relative;
}
.dialog:before {
content: '';
border-top: 5px solid red;
border-right: 5px solid red;
transform-origin: left top;
transform: skewX(45deg);
position: absolute;
content: ' ';
height: 10px;
width: 46%;
background: inherit;
left: -5px;
bottom: -10px;
}
.dialog:after {
content: '';
border-top: 5px solid red;
border-left: 5px solid red;
transform-origin: left top;
transform: skewX(-45deg);
position: absolute;
content: ' ';
height: 10px;
width: 46%;
background: inherit;
right: -5px;
bottom: -10px;
}
<div class="dialog">Here I am</div>
To achieve this you can make it with a background image, for exemple http://bootsnipp.com/snippets/featured/carousel-reviews-with-rating.
As you can see he take an image and resize it to take only a triangle like this:
.sprite-i-triangle {
background-position: 0 -1298px;
height: 44px;
width: 50px;
}
Try to find an image that meets your expectations. Otherwise you have some exemples in this site. (http://bootsnipp.com)
Below is the image I am trying for, I managed to get a square using CSS, but I am trying for horizontal and vertical line in a square.
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>
There are many ways to do this and one would be to use gradients like below: (the image in question was actually a rectangle.)
The approach is very simple - we use 2 linear gradients to create two thin solid colored lines and then position the images such that they match our needs. Linear gradients are used even though it creates only a solid color because it is easier to control size and position of an image than background color.
div {
height: 100px;
width: 200px;
border: 1px solid red;
background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 20px 0px, 0px 10px;
}
<div></div>
We can also create an output which has a fade-out or shadow effect like in the image in question:
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
Another way is to use :before and :after pseudo-elements:
.hub{
width: 119px;
height: 101px;
background: #b5adad;
position: relative;
padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
content: " ";
background: black;
display: block;
position: absolute;
}
.hub:after {
width: 1px;
height: 100%;
left: 15px;
top: 0;
}
.hub:before {
width: 100%;
height: 1px;
top: 15px;
left: 0;
}
<div class="hub">Lorem ipsum dolor amet</div>
I want to remove the corners of borders like this picture.
You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:
.bordery {
border: 1px solid teal;
padding: 20px;
position: relative;
}
.bordery::after,
.bordery::before {
background-color: white;
content: "";
display: block;
height: 10px;
position: absolute;
width: 10px;
}
.bordery::after {
bottom: -1px;
right: -1px;
}
.bordery::before {
top: -1px;
left: -1px;
}
<div class="bordery">This is just some sample content.</div>
You can use :before and :after pseudo elements to create this.
.el {
position: relative;
width: 200px;
height: 50px;
margin: 50px;
}
.el:after,
.el:before {
content: '';
position: absolute;
height: 90%;
width: 100%;
}
.el:before {
top: -5px;
left: -5px;
border-top: 1px solid orange;
border-left: 1px solid orange;
}
.el:after {
bottom: -5px;
right: -5px;
border-bottom: 1px solid orange;
border-right: 1px solid orange;
}
<div class="el"></div>
You can use css3 linear-gradient to draw this background to just a single <div> element and without using any pseudo elements.
div {
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
}
div {
background-color: #eee;
background-image: linear-gradient(to left, transparent 20px, orange 20px),
linear-gradient(to bottom, transparent 20px, orange 20px),
linear-gradient(to right, transparent 20px, orange 20px),
linear-gradient(to top, transparent 20px, orange 20px);
background-position: 100% 0, 100% 0, 0 100%, 0 100%;
background-size: 100% 1px, 1px 100%;
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
height: 100px;
width: 80%;
}
<div></div>
You can do it by following:
#rectangle{
width:400px;
height: 200px;
border-style: solid;
color:orange;
position: absolute;
}
#eraser1{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: -10px 0px 0px 374px;
}
#eraser2{
position: absolute;
width: 50px;
height: 50px;
background-color:white;
margin: 175px 0px 0px -13px;
}
Use clip-path property to clip corner
div{
width: 15em;
height: 5em;
border: 2px solid red;
clip-path: polygon(0 0, 91% 0, 100% 12%, 100% 100%, 12% 100%, 0 89%);
}
<div></div>
i was wondering if its possible to add gradients to border top without it affecting border right or border left which in this case are transparent. i tried adding a gradient color but it would affect border left and border right im trying to let border left and border right to be transparent
#borderone {
border-top: 33px solid #354658;
border-left: 33px solid transparent;
border-right: 33px solid transparent;
margin: 0 auto;
min-width: 1277px;
}
<div id='borderone'></div>
as you can see this is what i want it to do although i want a gradient background color instead of this solid dark blue color http://jsfiddle.net/EHELN/
See this :
http://css-tricks.com/examples/GradientBorder/
It is enough for me in my career .
For example:
#borderone:first-child:before {
content:'';
position:absolute;
width:100%;
height:4px;
background:linear-gradient(to left, #354658, #9EBBDA);
top:-33px;
left:-5;
}
For your case , you should use before & first-child pseudo-selectors CSS in the same time.
top(in pseudo selector) = -border height = -33 px
FIDDLE: http://jsfiddle.net/abdennour/EHELN/2/
You can get this efect using background for the gradient, and the 2 pseudo elements at the left and right to get the slanted corners
.test {
border-left: 33px solid transparent;
border-right: 33px solid transparent;
height: 33px;
background: linear-gradient(90deg, black, blue);
margin: 0 auto;
min-width: 42px;
background-clip: content-box;
position: relative;
}
.test:before, .test:after {
content: '';
position: absolute;
width: 33px;
height: 100%;
}
.test:before {
background: linear-gradient(45deg, transparent 50%, black 50%);
right: 100%;
}
.test:after {
background: linear-gradient(315deg, transparent 50%, blue 50%);
left: 100%;
}
demo
Looks like I missunderstood the direction. Try this to make it the other way (for webkit)
.test {
border-left: 33px solid transparent;
border-right: 33px solid transparent;
height: 33px;
background: linear-gradient(0deg, black, red);
margin: 0 auto;
min-width: 42px;
background-clip: content-box;
position: relative;
}
.test:before, .test:after {
content: '';
position: absolute;
width: 45px;
height: 45px;
bottom: 0px;
}
.test:before {
-webkit-transform: rotate(45deg);
-webkit-transform-origin: bottom right;
background: linear-gradient(-45deg, black 0, red 32px, transparent 32px);
right: 100%;
}
.test:after {
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: bottom left;
background: linear-gradient(45deg, black 0, red 32px, transparent 32px);
left: 100%;
}
demo 2
if you want to draw a gradient on your border, then you could use border-image or translucide borders with a gradient in bg : DEMO
But then :
You can even drop your translucide borders and make it a padding: DEMO
#borderone {
position:relative;
padding:33px 33px 0;/* well this is just like transparent borders :) */
margin: 0 auto;
height:100px;
background:linear-gradient(
to bottom,
#354658,
#9EBBDA 33px,
transparent 33px
);
}
http://www.colorzilla.com/gradient-editor/
This is for the background and not the border, but you can likely create the same effect you are looking for by using this tool.