create trapezium with border like below attached image in link with the borders beside it as straight line]
able to create trapezium shape but unable to create the long border with straight line and then border for trapezium.
If the background of the shape is solid and opaque, then you can easily accomplish the task using a pseudo-element with gradients:
.tab {
position: relative;
height: 120px; width: 400px;
box-shadow: 0 0 0 4px #ffc902, inset 0 0 0 100vw #000;
}
.tab::before {
content: attr(data-title);
position: absolute;
top: 0; right: 10px; z-index: 1;
display: grid; place-items: center;
height: 26px; width: 240px;
transform: translatey(-100%);
color: white;
background:
50% 0 / calc(100% - 44px) 100% linear-gradient(180deg, #ffc902 0 4px, #000 4px),
100% 0 / 26px 100% linear-gradient( to left bottom, #0000 calc(50% - 4px), #ffc902 calc(50% - 3px) 50%, #000 calc(50% + 1px)),
0 0 / 26px 100% linear-gradient( to right bottom, #0000 calc(50% - 4px), #ffc902 calc(50% - 3px) 50%, #000 calc(50% + 1px));
background-repeat: no-repeat;
}
/* Only for example --> */ body{margin:0;min-height:100vh;background-image:url(https://i.stack.imgur.com/m9NKc.png),radial-gradient(#fff8,#000f);display:flex;justify-content:center;align-items:center;background-repeat:no-repeat}
<div class="tab" data-title="First Tab"></div>
Hei i have this code in CSS:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
}
<div class="gradient-four"></div>
And it´s applied to a div. How can i repeat that div, without repeating the code over and over? I tried the background repeat but that would´t do the trick.Is it possible?
Thank you
To repeat a linear/radial-background you simply need de specify a size then you may adjust the background-repeat to choose how to repeat it:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
background-size:50px 50px;
}
<div class="gradient-four"></div>
<div class="gradient-four" style="background-repeat:repeat-x"></div>
<div class="gradient-four" style="background-repeat:repeat-y"></div>
And if you want to repeat the result of the whole div you have, you may adjust the gradient like this:
.gradient-four {
height: 500px;
width: 500px;
margin: 5px auto;
float: left;
background-image: radial-gradient( circle closest-side, red, purple 98%, transparent 100%);
background-size:100px 100px;
}
<div class="gradient-four"></div>
Use the repeating-radial-gradient function. It takes the same parameters as radial-gradient and functions the same, just repeating.
Use repeating-radial-gradient like so:
.gradient-four {
height: 100px;
width: 100%;
margin: 5px auto;
float: left;
background-image: -webkit-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -moz-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -ms-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-size: 100px 100px;
}
JSFiddle
I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen?
You can use SkewY as shown in the demo below:
div {
height: 100px;
width: 500px;
display: inline-block;
border: 10px solid green;
border-bottom: none;
text-align: center;
line-height: 100px;
position: relative;
color: green;
font-size: 20px;
}
div:before,
div:after {
content: "";
border-bottom: 10px solid green;
position: absolute;
width: calc(50% + 10px);
height: 100%;
top: 0;
}
div:before {
transform: skewY(5deg);
left: -10px;
}
div:after {
transform: skewY(-5deg);
left: 50%;
}
<div>Request a Quote</div>
gradient can be a first chip approach ...
example in situation: http://codepen.io/gc-nomade/pen/wGEyvd
button {
color:green;
display:block;
width:50%;
margin:1em auto;
padding:1.5em 0 2.5em;
border:none;
background:linear-gradient(to left, green, green) top,
linear-gradient(to bottom, green,green) top left,
linear-gradient(to bottom, green,green) top right,
linear-gradient(to bottom left, transparent 45%, green 47%, green 51%, transparent 52%) bottom left,
linear-gradient(to bottom right, transparent 45%, green 47%, green 51%, transparent 52%) bottom right;
background-repeat:no-repeat;
background-size:100% 3px, 3px 70%, 3px 70%,50% 30%, 50% 30%;
}
<button>REQUEST A CODE</button>
I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are
See the following fiddle: http://jsfiddle.net/ovb597yq/
<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-
gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>
.
body{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
Where its white I am trying to make it transparent but its not currently happening
Any ideas?
You need to apply it on :after :pseudo-element and change #fff to transparent.
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
Writing an app that uses CSS to define icons, avoiding dependency on external image files. This works fine for circles, squares, triangles, diamonds, which is almost enough.
I wonder if it's possible to create slightly more complex icons like the two grid shaped ones on the right using CSS? It need not support IE8.
.icon {
height: 20px;
width: 20px;
background-color: steelblue;
display: inline-block;
}
.icon-circle {
border-radius: 10px;
}
.icon-square {
border-radius: 0
}
<div class="icon icon-circle"></div>
If you use pseudo elements :before and :after, you can make those icons without images. And you can even make them responsive (see my fiddle).
I used the pseudo elements to create the "white lines" so you will be able to make both last icons like this:
div {
width: 20%;
padding-bottom: 20%;
margin: 5% 10%;
background-color: #6095C9;
position: relative;
float: left;
}
div:after,
div:before {
content: "";
position: absolute;
background-color: #fff;
}
.one:before,
.two:before {
margin: 0 48%;
width: 4%;
height: 100%;
}
.one:after,
.two:after {
margin: 48% 0;
height: 4%;
width: 100%;
}
.two:before {
height: 50%;
bottom: 0;
}
<div class="one"></div>
<div class="two"></div>
FIDDLE
Here is another method to achieve the shapes using gradients instead of pseudo-elements. You can play around with the background sizes to produce different effects (like in shape3).
The advantage of this over the pseudo-element method is that it doesn't require any extra real/pseudo-elements but the drawback is that the browser support for linear-gradients is still poor compared to pseudo-elements.
div {
margin: 10px;
height: 50px;
width: 50px;
background-color: steelblue;
transition: all 1s;
}
.shape1 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 100%;
}
.shape2 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-repeat: repeat-y, repeat-x;
}
.shape3{
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-position: 0% 0%, 0% 100%, 0% 0%;
background-repeat: repeat-y, repeat-x;
}
.shape4 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 25%, 25% 100%;
background-position: 0% 100%, 100% 100%;
background-repeat: repeat-y, repeat-x;
}
.large {
height: 150px;
width: 150px;
}
/* Just for demo */
div {
float: left;
}
.small{
clear:both;
}
div:hover {
background-color: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape1 small"></div>
<div class="shape1 large"></div>
<div class="shape2 small"></div>
<div class="shape2 large"></div>
<div class="shape3 small"></div>
<div class="shape3 large"></div>
<div class="shape4 small"></div>
<div class="shape4 large"></div>
You may be able to use a single element here without actually using pseudo elements at all with the help of box-shadow's.
So, say you have a square div element:
div {
height: 20vw;
width: 20vw;
background: tomato;
}
<div></div>
You could then add a box shadow, without a spread, by using:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato;
}
<div></div>
you can even use multiple box shadows by seperating them with a ,:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0 21vw tomato, 21vw 21vw tomato;
}
<div></div>
You would even be able to overlap them:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0vw 21vw tomato, 16vw 21vw tomato, 21vw 21vw tomato;
}
<div></div>
So creating such wouldn't be overly taxing on browser compatibility nor pseudo elements (which could be used for other purposes).
div {
height:20vw;
width:20vw;
background:tomato;
box-shadow:0 0 0 tomato;
-webkit-animation: boxshadowmult 8s infinite;
animation: boxshadowmult 8s infinite;
}
#-webkit-keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
#keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
/*demo only*/
html{height:100%;
background: rgb(79,79,79); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<div></div>
Using :before and :after, you can create two more "boxes" to play with.
JSFiddle Demo
.icon {
width: 200px;
height: 95px;
background: blue;
}
.triple-square {
position: relative;
margin: 0 0 105px 0;
border-radius: 5px;
}
.triple-square:before {
content: " ";
position: absolute;
bottom: -105px;
left: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
.triple-square:after {
content: " ";
position: absolute;
bottom: -105px;
right: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
Here's another example to create 3 circles in a triangle shape...
http://jsfiddle.net/RrhxN/1/