I have defined two CSS classes that highlights corners of table cells:
.right
{
background-image: linear-gradient(225deg, green, green 5px, transparent 5px, transparent);
}
.left
{
background-image: linear-gradient(135deg, orange, orange 5px, transparent 5px, transparent);
}
(example of usage)
<td /*some attributes*/ class="right">value</td>
When I use it for table cells, it looks like this:
But both of them sets background so I can't use both of them to the same cell. Is here any way how to highlight both corners of the same cell?
I have already solved this problem, I just made combined class
.note.approving
{
background-image: linear-gradient(225deg, green, green 5px, transparent 5px, transparent), linear-gradient(135deg, orange, orange 5px, transparent 5px, transparent);
}
Here is an alternative solution, using pseudo-elements to insert CSS triangles:
table {
border-collapse: collapse;
}
td {
position: relative;
overflow: hidden;
border: 1px solid #ccc;
padding: 1.6em 1em;
}
td.left::before,
td.right::after {
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
td.left::before {
left: -5px;
transform: rotate(90deg);
border-bottom: 10px solid orange;
}
td.right::after {
right: -5px;
transform: rotate(-90deg);
border-bottom: 10px solid green;
}
<table>
<tr>
<td class="left">1</td>
<td class="left right">2</td>
<td class="right">3</td>
</tr>
</table>
While a lot more verbose than OP's own solution (using background gradients), this might have some additional value to some, seeing that the pseudo elements could enable you to add pointer events to them, depending on your exact scenario.
Related
I want to create a zig-zag border in css which is responsive, i.e. the zig-zag border must adjust itself to fit perfectly according to width of the container.
I was able to create this:
But on changing the width it's output is :
I want to perfectly fit the zig-zag pattern like above image on changing the width of the container.
It would be helpful if I could also add some radius at peak points like this :
Here is the code so far
.container {
width: 664px;
}
.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}
.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}
.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}
<div class="container">
<div class="sub-container"></div>
<div class="upper-zigzag"></div>
<div class="lower-zigzag"></div>
</div>
Thanks!
Imagine we have a triangle:
article {
position: relative;
}
article>.triangle {
position: absolute;
left: 0;
top: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}
<article>
<div class="triangle"></div>
</article>
Is it possible to change css to achieve many triangles, which are all across the width of a browser?
You can do it like this and pick whatever color you want the triangles to be:
EDIT: Shortened thanks to Temani Afi's comment.
.triangle {
height: 30px;
background-image:
linear-gradient(-45deg, transparent 75%, #FF0000 0),
linear-gradient(45deg, transparent 75%, #FF0000 0);
background-size: 40px 40px;
background-position: 20px 0;
}
<article>
<div class="triangle"></div>
</article>
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)
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>
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.