I'm trying to create an object like this using CSS3:
Basically this is a down pointing arrow (the blue part). Tried several services such as http://www.cssarrowplease.com/ but they don't produce quite what's needed.
Any clues how such arrows can be made?
.arrow_box {
position: relative;
background: #88b7d5;
}
.arrow_box:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
<div class="arrow_box"></div>
Use multiple background and gradient like this:
body {
margin:0;
height:100vh;
background:
linear-gradient(blue,blue) top/100% 50px,
linear-gradient(to bottom left,blue 49%,transparent 50%) 0 50px/50.1% 100px,
linear-gradient(to bottom right,blue 49%,transparent 50%) 100% 50px/50.1% 100px,
#000;
background-repeat:no-repeat;
}
You can also rely on border to make the background less complex:
.box {
height:100vh;
border-top:50px solid blue;
background:
linear-gradient(to bottom left,blue 49%,transparent 50%) top left,
linear-gradient(to bottom right,blue 49%,transparent 50%) top right,
#000;
background-size:50.1% 40%;
background-repeat:no-repeat;
box-sizing:border-box;
}
body {
margin:0;
}
<div class="box">
</div>
You could set the background to one color and implement a triangle that points down, like this:
#triangle-down {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 125px solid blue;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p id="triangle-down"></p>
</body>
</html>
Obviously, this is a basic example that you can tweak to meet your particular needs.
For more examples, I suggest visiting this site. I hope this was helpful.
You can consider using pseudo code. The example below will look good on small devices. For larger devices a media query needs to be defined using different settings.
body {
margin: 0;
}
.container {
width: 100%;
background-color: black;
height: 200px;
position:relative;
}
.container:before {
content: "";
width: 0;
height: 0;
border-left: 600px solid transparent;
border-right: 600px solid transparent;
border-top: 160px solid darkblue;
position: absolute;
top: 0;
left: -250px;
}
<div class="container"></div>
Related
Hi i am trying to make the following:
They triangles should be about 40% in height of the container, and 50% in width, so they meet in the middle.
I have been trying to make something similar.. but unsuccessfull so far..
And looking around, i have found nothing i could use so far.
my code:
div {
height: 373px;
width: 0px;
margin: 26px;
display: inline-block;
}
.left {
border-bottom: 100px solid #ff0;
border-left: 320px solid transparent;
}
.right {
border-bottom: 100px solid #f00;
border-right: 320px solid transparent;
}
header {
border: 2px solid black;
width: 50%;
height: 500px;
}
<header>
<div class="right"></div>
<div class="left"></div>
</header>
hoping for someone smarter than me to see where i should go from here...
Use background coloration like below:
.box {
height:300px;
background:
/* Right bottom triangle*/
linear-gradient(to bottom right,transparent 49.5%,blue 50%) bottom right,
/* left bottom triangle*/
linear-gradient(to bottom left ,transparent 49.5%,red 50%) bottom left ,
yellow;
background-size:50% 40%; /* Width height*/
background-repeat:no-repeat;
}
<div class="box">
</div>
Related answer for more details: How do CSS triangles work?
Another idea with pseudo elements (that you can replace with common elements) in case you want to have different elements.
.box {
height: 300px;
background: yellow;
position: relative
}
.box:before,
.box:after {
content: "";
position: absolute;
height: 40%;
width: 50%;
bottom: 0;
}
.box:before {
left: 0;
background: linear-gradient(to bottom left, transparent 49.5%, red 50%);
}
.box:after {
right: 0;
background: linear-gradient(to bottom right, transparent 49.5%, blue 50%);
}
<div class="box">
</div>
Since you need percent values, you can use clip-path. Beware that it may not be supported fully on some browser https://caniuse.com/#feat=css-clip-path and for some you may need prefixes (e.g. -webkit-clip-path)
.wrap {
height: 200px;
width: 100%;
position: relative;
background: #333;
}
.triangle {
background: red;
clip-path: polygon(0 40%, 0% 100%, 100% 100%);
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 50%;
}
.triangle.tr-right {
left: auto;
right: 0;
clip-path: polygon(100% 40%, 0% 100%, 100% 100%);
}
<div class="wrap">
<div class="triangle tr-left"></div>
<div class="triangle tr-right"></div>
</div>
JSFiddle
Clip-path created with Clippy
* {
box-sizing: border-box;
}
.triangular-pointer-box {
display: flex;
align-items: center;
background: #161616;
padding: 20px;
padding-left: 120px;
height: 200px;
position: relative;
width: 80%;
}
.triangular-pointer-box > h3 {
color: #fff;
}
.triangular-pointer-box:after {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #161616;
position: absolute;
right: -100px;
top: 0;
}
.triangular-pointer-box:before {
content: "";
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid #ffffff;
position: absolute;
left: 0;
top: 0;
}
<div class="triangular-pointer-box">
<h3>Title goes here</h3>
</div>
I'm trying to make this shape in CSS. I haven´t been able to get it perfectly.
Check this out, I have done with the :before pseudo class. We can tweak the below snippet to make it look like what you need:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #f00;
}
.triangle:before {
display: block;
content: " ";
position: absolute;
height: 100px;
width: 10px;
left: 3px;
top: 8px;
background: #fff;
border-radius: 100%;
}
<div class="triangle"></div>
Another try:
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 86.6px;
border-color: transparent transparent transparent #f00;
}
.triangle:before {
display: block;
content: " ";
position: absolute;
height: 180px;
width: 110px;
left: -90px;
top: -30px;
background: #fff;
border-radius: 200%;
}
<div class="triangle"></div>
This solution relies soley on CSS generated content, meaning no extra markup. The only caveat, is that ::after background color must match parent element background color.
div::before {
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 100px;
border-color: transparent transparent transparent #007bff;
}
div::after{
content:'';
display:block;
width:50px;
background:#fff;
height:100px;
position:absolute;
border-radius:0 100% 100% 0;
transform: scaleX(0.4);
transform-origin:top left;
}
Demo here
I have some divs that have rounded corners and colored borders. I want the borders of the div to have the gradient so that it will change when the user hovers overs the div.
I have found all of the sites on how to use the gradient (http://css-tricks.com/css3-gradients/, http://gradients.glrzad.com/, etc.) but I still can't figure out how to get this to work for rounded edge borders.
Will someone please guide me to a site that describes how to do this or even help me with the code?
Here is the SIMPLE solution for that :
Outcome : CSS rounded corners with gradient border
.yourClass {
display: inline-flex;
border: double 6px transparent;
border-radius: 80px;
background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00, #3020ff);
background-origin: border-box;
background-clip: content-box, border-box;
}
You can nest two elements and let the outer div act as the gradient border then you can work around this problem, example:
<div class="container">
<div class="content">
...
</div>
</div>
And then in your CSS:
/*
unprefixed for conciseness, use a gradient generator por production code
*/
.container {
background: linear-gradient(red, black);
}
.content {
background: white;
padding: 10px;
}
For a working example take a look at https://stackoverflow.com/a/7066176/524555
Using a :before element is the most ideal solution in my opinion, as you then have full control via CSS and the HTML markup stays clean.
.circle {
width: 300px;
height: 200px;
background: white;
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
width: 100%;
height:100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
padding: 10px;
top: -10px;
left: -10px;
position:absolute;
z-index:-1;
}
You can tweak the padding and the top and left values to adjust the border thickness.
Here is a JSFiddle that shows a practival example: http://jsfiddle.net/wschwarz/e2ckdp2v/
I know this answer was already answered and accepted, but I wanted to post a different approach I used, because this accepted answer wouldn't work if the button was over a background with another gradient, or an image, for example.
My solution works only for horizontal gradients and rounded-cornered (but not circle) buttons. I used both the "border-image" property and pseudo-elements to achieve this effect:
The button would have only the top and bottom "border-image" borders. The left and right borders would be completed with pseudo-elements.
Here's a working example:
HTML:
<div class="background">
<button class="button">
My button!
</button>
</div>
CSS:
*, *:before, *:after {
box-sizing: border-box;
}
.background {
background: linear-gradient(to bottom, #002e4b 0%,#1c4722 100%);
width:500px;
height:500px;
display:flex;
align-items:center;
justify-content:center;
}
.button {
box-sizing:border-box;
display: inline-block;
padding:0.5em 0;
background:none;
border:none;
border-top:2px solid #0498f8;
border-bottom:2px solid #0498f8;
border-image: linear-gradient(to right, #0498f8 0%, #4db848 100%);
border-image-slice: 1;
position: relative;
text-transform: lowercase;
transition:background 0.3s;
color: #fff;
cursor: pointer;
font-size:1em;
&:before,
&:after {
content: '';
display: block;
width: 2em;
height: calc(100% + 4px);
border-radius: 3em 0 0 3em;
border: 2px solid #0498f8;
position: absolute;
border-right: none;
transition:background 0.3s;
left: -2em;
top: -2px;
}
&:after {
border-radius: 0 3em 3em 0;
border: 2px solid #4db848;
position: absolute;
border-left: none;
left:auto;
right: -2em;
top: -2px;
}
&:hover {
background:rgba(0,0,0,0.3);
&:after,
&:before {
background:rgba(0,0,0,0.3);
}
}
}
https://jsfiddle.net/fnbq92sc/2/
border="solid 1px transparent"
background="linear-gradient(Canvas, Canvas) padding-box, linear-gradient(red, blue) border-box"
borderRadius="1rem"
second part for background is the gradient you desire ^
Is there way to create inset border radius with css3? (Without images)
I need a border radius like this:
The best way I've found to achieve this with all CSS and HTML (no images, etc.) is by using CSS3 gradients, per Lea Verou. From her solution:
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
The net result is a set of transparent gradients with curves. See the full JSFiddle for a demo and to play around with the way it looks.
Obviously this depends on support for rgba and gradient, and accordingly should be treated as a progressive enhancement, or if it's essential to the design, you should supply an image-based fallback for older browsers (especially IE, which doesn't support gradient even up through IE9).
You can achieve this by absolutely positioning transparent circle elements in the corners with box shadows. I used a combination of hidden overflowed divs containing spans, box shadows, borders, and pseudo selectors.
Check out my example.
This is the basic HTML and CSS you need to get started:
a {
display: inline-block;
width: 250px;
height: 100px;
background: #ccc;
border: 2px solid #000;
position: relative;
margin: 10px;
}
a div {
position: absolute;
top: 0;
overflow: hidden;
width: 15px;
height: 100%;
}
a div:after {
content: '';
background: #000;
width: 2px;
height: 75px;
position: absolute;
top: 12.5px;
}
a div:first-of-type {
left: -14px;
}
a div:first-of-type:after {
left: 0;
}
a div:last-of-type {
right: -14px;
}
a div:last-of-type:after {
right: 0;
}
a span {
display: block;
width: 30px;
height: 30px;
background: transparent;
position: absolute;
bottom: -20px;
right: -20px;
border: 2px solid #000;
border-radius: 25px;
box-shadow: 0 0 0 60px #ccc;
}
a div:first-of-type span {
left: -20px;
}
a div:first-of-type span:first-child {
top: -20px;
}
a div:first-of-type span:last-child {
bottom: -20px;
}
a div:last-of-type span {
right: -20px;
}
a div:last-of-type span:first-child {
top: -20px;
}
a div:last-of-type span:last-child {
bottom: -20px;
}
<a href="">
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
</a>
I don't think that it would be possible if the corners have to be transparent, however if the background is known, you can create a div in each corner with a rounded border. If those divs are then given the same background color as the page background the effect will work.
See my example here http://jsfiddle.net/TdDtX/
#box {
position: relative;
margin: 30px;
width: 200px;
height: 100px;
background: #ccc;
border: 1px solid #333;
}
.corner {
position: absolute;
height: 10px;
width: 10px;
border: 1px solid #333;
background-color: #fff;
}
.top-left {
top: -1px;
left: -1px;
border-radius: 0 0 100% 0;
border-width: 0 1px 1px 0;
}
.top-right {
top: -1px;
left: 190px;
border-radius: 0 0 0 100%;
border-width: 0 0 1px 1px;
}
.bottom-left {
top: 90px;
left: -1px;
border-radius: 0 100% 0 0;
border-width: 1px 1px 0 0;
}
.bottom-right {
top: 90px;
left: 190px;
border-radius: 100% 0 0 0;
border-width: 1px 0 0 1px;
}
<div id="box">
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-left"></div>
<div class="corner bottom-right"></div>
</div>
You could achieve this effect with the new css3-Border-images (well, it's images, but it scales without problems). But this is quite new and not very widely supported yet (well in all decent browsers (with prefixes) except IE to be precise;) ).
A nice article about border images on csstricks.
Browser Support
It doesn't look like that's possible. I tried a border-radius with a negative value just to see what would happen but it had no effect.
Edit:
Even if you break the box down into smaller parts, at some point you'd still have to create a transparent inset corner. The transparency is the tricky part that might prevent this from being possible without images. Basically, you'd have to be able to render a transparent circle with a non-transparent surrounding bg (and if that's possible in CSS, I'd love to know how :)
If you don't need transparency, there are ways to do it.
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>
</body>
</html>
Example here
Hmm you could possibly make use of this little trick here to create Inset Border Radius
Then to support transparency you would have to probably add other blocks in between. More or less like the way the old rounded images used to be done; having a span for every corner with the transparent image. And spans on the sides and the top to fill up the empty space. Instead of using images you could use this trick to do it in CSS.
body {
background: #fff;
}
.div{
position:relative;
}
.box {
background: #f7f7f7;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;
border: 1px solid #ccc;
border-left: 0px;
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -33px;
left: -263px;
width: 300px;
height: 242px;
border-radius: 300px;
border: 1px solid #ccc;
}
<div class="div">
<div class="box"></div>
</div>
</body>
</html>
Any way to declare a size/partial border to a box in CSS? For example a box with 350px that only shows a border-bottom in its firsts 60px. I think that might be very useful.
Examples:
Not really. But it's very easy to achieve the effect in a way that degrades gracefully and requires no superfluous markup:
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:after {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
bottom: -4px;
}
<div></div>
I know, this is already solved and pixels were requested. However, I just wanted to share something...
Partly underlined text elements can easily achieved by using display:table or display:inline-block
(I just don't use display:inline-block because, yeah you know, the awkward 4px-gap).
Textual Elements
h1 {
border-bottom: 1px solid #f00;
display: table;
}
<h1>Foo is not equal to bar</h1>
Centering, display:table makes it impossible to center the element with text-align:center.
Let's work around with margin:auto...
h1 {
border-bottom: 1px solid #f00;
display: table;
margin-left: auto;
margin-right: auto;
}
<h1>Foo is not equal to bar</h1>
Well, that's nice, but it's not partially.
As bookcasey already introduced, pseudo-elements are worth gold.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
Offset, the underline is left aligned right now. To center it, just push the pseudo-element the half of its width (50% / 2 = 25%) to the right.
h1 {
display: table;
margin-left: auto;
margin-right: auto;
}
h1:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
margin-left: 25%;
width: 50%;
}
<h1>Foo is not equal to bar</h1>
...as davidmatas commented, using margin:auto is sometimes more practical, than calculating the margin-offset by hand.
So, we can align the underline to the left, right or center (without knowing the current width) by using one of these combinations:
Left: margin-right: auto (or just leave it off)
Middle: margin: auto
Right: margin-left: auto
Full example
.underline {
display: table;
margin-left: auto;
margin-right: auto;
}
.underline:after {
border-bottom: 1px solid #f00;
content: '';
display: block;
width: 50%;
}
.underline--left:after {
margin-right: auto; /* ...or just leave it off */
}
.underline--center:after {
margin-left: auto;
margin-right: auto;
}
.underline--right:after {
margin-left: auto
}
<h1 class="underline underline--left">Foo is not equal to bar</h1>
<h1 class="underline underline--center">Foo is not equal to bar</h1>
<h1 class="underline underline--right">Foo is not equal to bar</h1>
Block-Level Elements
This can easily be adopted, so that we can use block-level elements. The trick is to set the pseudo-elements height to the same height as its real element (simply height:100%):
div {
background-color: #eee;
display: table;
height: 100px;
width: 350px;
}
div:after {
border-bottom: 3px solid #666;
content: '';
display: block;
height: 100%;
width: 60px;
}
<div></div>
Here is another solution that rely on linear-gradient where you can easily create any kind of line you want. You can also have multiple lines (on each side for example) by using multiple background:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
#ccc
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat,
linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat,
linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat,
linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat,
#ccc
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
Here is another syntax to achieve the same as above:
.box1 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(#000 0 0) top /40% 3px no-repeat,
#ccc
}
.box2 {
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0) bottom/ 60% 2px no-repeat,
#ccc;
}
.box3{
width: 200px;
padding: 20px;
margin: 10px auto;
text-align: center;
background:
linear-gradient(red 0 0)bottom left/ 60% 2px,
linear-gradient(blue 0 0) 60% 0 / 40% 2px,
linear-gradient(brown 0 0) left/ 3px 30%,
linear-gradient(orange 0 0) right / 3px 40%,
#ccc;
background-repeat:no-repeat;
}
<div class="box1">
Box1
</div>
<div class="box2">
Box2
</div>
<div class="box3">
Box3
</div>
I used a grid to build draw some of the borders.
See here.
Code:
/* ungrid without mobile */
.row {
width: 100%;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
}
/* things to change */
.row {
width: 70%;
margin: auto;
}
.mid.row>.col {
height: 150px;
}
/* draw box and align text */
.col {
text-align: center;
}
.top.left.col {
border-top: 1px solid black;
border-left: 1px solid black;
}
.top.right.col {
border-top: 1px solid black;
border-right: 1px solid black;
}
.bottom.left.col {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
.bottom.right.col {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
.mid.row>.col {
border-left: 1px solid black;
border-right: 1px solid black;
vertical-align: middle;
}
.top.center.col {
position: relative;
top: -0.5em;
}
.bottom.center.col {
position: relative;
bottom: -0.5em;
}
<div class="row">
<div class="top left col"></div>
<div class="top center col">Top</div>
<div class="top right col"></div>
</div>
<div class="mid row">
<div class="col">Mid</div>
</div>
<div class="row">
<div class="bottom left col"></div>
<div class="bottom center col">Bottom</div>
<div class="bottom right col"></div>
</div>
CSS does not support partial borders. You'd need to use an adjacent element to simulate this.
Been playing a bit around with your solutions and came up with that.
I'd appreciate your comments and thoughts.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test file</title>
<style>
#box {
background-color: gray;
position: relative;
left: 10px;
top: 10px;
height: 180px;
width: 380px;
}
#grad1 {
position: absolute;
left: -10px;
top: -10px;
height: 40px;
width: 2px;
background-image: linear-gradient(red, red);
}
#grad2 {
position: absolute;
left: -10px;
top: -10px;
height: 2px;
width: 40px;
background-image: linear-gradient(red, red);
}
</style>
</head>
<body>
<div id="box">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
</body>
</html>