Can you put 2 circles inside of one Button [duplicate] - html

This question already has answers here:
Circle with two borders
(4 answers)
Closed 7 months ago.
I want to make a 1€ coin with CSS but I have the problem that I can't give it it's characteristic shape consisting of two circles. I don't want to use multiple divs for making the two circles because I want to have it as a Button. Is there any way to put 2 different shapes in one button tag or are you forced to use divs?
Here is my failed attempt at trying to do so:
.btnCircle1 {
height: 50px;
width: 50px;
border-radius: 50%;
background: red;
z-index: 100;
}
.btnCircle2 {
height: 100px;
width: 100px;
border-radius: 50%;
background: blue;
z-index: 1;
}
<button type="button" class="btnCircle1 btnCircle2"></button>

.btnCircle {
/* here just change one value, to change the other automatically */
/* for example you can use a responsive unit (that change often) like `vw` and the other element will automatically changed automatically */
--bigCirle-Height: 100px;
height: var(--bigCirle-Height);
width: var(--bigCirle-Height);
/* is always a perfect circle */
border-radius: var(--bigCirle-Height);
border: none; /* Remove default borders */
/* add this to make the ::before works */
position: relative;
}
.btnCircle::before {
/* change this value 1 means bigger, the smaller is the number (for example 0.7) the yellow circle is smaller */
/* using css variables and calculations the money it will be always responsive to the parent height */
--smallCirle-Height: calc(var(--bigCirle-Height) * 0.7);
content: '1€';
height: var(--smallCirle-Height);
width: var(--smallCirle-Height);
border-radius: var(--smallCirle-Height);
background: yellow;
/* this two lines will center the circle */
/* inset is like writing top: 50%, left: 50% */
inset: 50%;
transform: translate(-50%, -50%);
/* center the text inside circle */
display: grid;
place-content: center;
/* positioning absolutely */
position: absolute;
}
<button type="button" class="btnCircle"></button>

as A Haworth mentioned you, one way is using the before/after pseudo elements
here's an example:
.btnCircle {
position: relative;
border: none;
padding: 45px;
border-radius: 50%;
background: red;
}
.btnCircle::after {
position: absolute;
inset: 10px;
content: '';
background: blue;
border-radius: 50%;
}
<button class="btnCircle"></button>

One you can use background and border.
/*With background and border css start*/
.btnCircle1 {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
width: 85px;
color: white;
background-color: blue;
border: 15px solid red;
border-radius: 100%;
}
/*With background and border css end*/
/*With pesudo element css start*/
.btnCircle1-psd {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
width: 50px;
color: white;
}
.btnCircle1-psd::before,
.btnCircle1-psd::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: inline-block;
height: 50px;
width: 50px;
border-radius: 50%;
background: red;
z-index: -1;
}
.btnCircle1-psd::after {
transform: scale(0.8);
background-color: blue;
}
/*With pesudo element css end*/
/*With radial gradient background color start*/
.btnCircle1-bg {
position: relative;
background: transparent;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
height: 85px;
width: 85px;
color: white;
border-radius: 100%;
background: rgb(255, 0, 0);
background: radial-gradient(circle, rgba(255, 0, 0, 1) 50%, rgba(0, 160, 255, 1) 50%);
}
/*With radial gradient background color end*/
/*With box inset shadow color start*/
.btnCircle1-shadow {
position: relative;
background: red;
border: none;
z-index: 99;
line-height: 50px;
text-align: center;
height: 85px;
width: 85px;
color: white;
border-radius: 100%;
-webkit-box-shadow: inset 0px 0px 0px 10px blue;
box-shadow: inset 0px 0px 0px 10px blue;
}
/*With box inset shadow color end*/
<h1> With background and border</h1>
<button type="button" class="btnCircle1">1$</button>
<h1> With radial gradient background color</h1>
<button type="button" class="btnCircle1-bg">1$</button>
<h1> With box inset shadow color</h1>
<button type="button" class="btnCircle1-shadow">1$</button>
<h1>With pesudo element <strong>before</strong> and <strong>after</strong>.</h1>
<button type="button" class="btnCircle1-psd">1$</button>

Related

Circle with transparent borders over background

How can I achieve such a thing in CSS?
I've tried so many ways but the dark background is still in the way and can't be clipped so the background image under it's invisible...
.item {
position: relative;
}
.item:before {
content: '';
size(100%);
top: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0,0 0.1);
}
<div class="item">
<img>
<span class="rate">
<span class="amount">10</span> امتیاز
</span>
</div>
I'm looking for a way to be able to make parts of the dark background transparent, so the image can be seen.
This can be achieved using a radial gradient, (Example split onto separate lines to make it easier to read)
background-image: radial-gradient(
/* Position the circle at the center, 40px from the top */
circle at center 40px,
/* The center of the radius should be dark */
rgba(0,0,0,0.4) 0%,
/* This is the inner edge of the circle, we transition from dark-transparent between pixels 30 and 31 */
rgba(0,0,0,0.4) 30px, rgba(0,0,0,0) 31px,
/* This is the outer edge of the circle, we transition back from transprent-dark between pixels 34 and 35*/
rgba(0,0,0,0) 34px, rgba(0,0,0,0.4) 35px,
/* Everything outside of the circle should be dark */
rgba(0,0,0,0.4) 100%
);
Where circle at center 40px defines the position of the circle relative to the parent element (Horizontally centred, an 40px down from the top) bare in mind this is the position for the centre of the circle so you do need to account for it's radius.
And we use very small steps between the gradient to make it look like a solid line rather than a blurred gradient (I find that a 1px difference helps prevent aliasing on the line and makes everything look much smoother)
You can adjust the size of the circle or the thickness of the line by changing the 30px, 31px, 34px and 35px values in the gradient.
Working example:
.item {
position: relative;
width: 200px;
height: 200px;
background: url(https://picsum.photos/seed/picsum/200/200);
}
.item:before {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
/* This is the ring itself, you can adjust it's size using the pixel values, leaving 1px differnce usually leaves the best result for smooth edges */
background-image: radial-gradient(circle at center 40px, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 30px, rgba(0, 0, 0, 0) 31px, rgba(0, 0, 0, 0) 34px, rgba(0, 0, 0, 0.4) 35px, rgba(0, 0, 0, 0.4) 100%);
}
<div class="item"></div>
(This method is browser compatible with pretty much every browser released since 2010)
Infinite box-shadow with overflow: hidden; I don't know if it would work for you, I just tried-
<style>
.item img {
max-width: 100%;
vertical-align: top;
}
.item {
font-family: 'Amiri', serif;
width: 300px;
margin: 20px auto;
overflow: hidden; /* STEP-1 */
position: relative;
}
.rate {
position: absolute;
width: 100px;
height: 100px;
border-radius: 100%;
background: rgba(0,0,0,.7);
top: 80px;
left: 50%;
transform: translatex(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
}
.rate::before {
position: absolute;
content: '';
width: calc(100% + 10px);
height: calc(100% + 10px);
top: -5px;
left: 50%;
transform: translatex(-50%);
border-radius: 100%;
box-shadow: 0 0 0 100vh rgba(0,0,0,.7); /* STEP-2 */
}
.amount {
font-size: 20px;
font-weight: 700;
display: block;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght#400;700&display=swap" rel="stylesheet">
<div class="item">
<img src="https://images.pexels.com/photos/4888690/pexels-photo-4888690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Card title">
<span class="rate">
<span class="amount">١٠</span> امتیاز
</span>
</div>
You could use a few divs with position: absolute:
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.bg {
height: 100vh;
width: 100%;
background-image: url('https://i.ytimg.com/vi/fqumdSlyLxg/maxresdefault.jpg');
filter: brightness(0.4);
}
.circle {
position: absolute;
height: 150px;
width: 150px;
border-radius: 50%;
backdrop-filter: brightness(5);
-webkit-backdrop-filter: brightness(5);
z-index: 0;
}
.inner-circle {
position: absolute;
height: 142px;
width: 142px;
border-radius: 50%;
backdrop-filter: brightness(0.2);
-webkit-backdrop-filter: brightness(0.2);
z-index: 1;
}
.rate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: absolute;
height: 142px;
color: white;
z-index: 2;
}
.amount {
font-size: 30px;
border-radius: 50%;
text-shadow: 0px 0px 5px #fff;
}
<div class="container">
<div class="bg"></div>
<div class="circle"></div>
<div class="inner-circle"></div>
<div class="rate">
<span class="amount">10</span>
<span class="amount">امتیاز</span>
</div>
</div>
Use the backdrop-filter property to set the brightness and display: flex on the container to center everything, then for the text use text-shadow to make it luminous.
As an alternative, I made .item and its child elements Flexbox containers for easy positioning.
The circle is simply a circular element with a border.
All you have to do now is fiddle with sizes, colors and tranparency.
For the fun of it I added some :hover effects...
snippet with comments
/* All are FBL containers, for easy positioning */
.item, .item>*, .rate {
display: flex;
justify-content: center; align-items: center;
}
.rate { flex-direction: column }
/* item content */
.item {
position: relative; /* position child elements to this parent */
width: 400px;
height: 600px;
/* set image to background of item */
background-image: url("https://i.ytimg.com/vi/fqumdSlyLxg/maxresdefault.jpg");
background-repeat: no-repeat;
background-size: cover; /* clip/stretch when too large/small */
background-color: rgba(0,0,0,0.3); /* some tranparent black */
background-blend-mode: overlay; /* mix bg-color with image */
/* eye-candy */
margin: 5rem auto; /* center */
font-size: 1.5em;
font-weight: bold;
color: rgba(255,255,255,.6);
border-radius: 12px;
}
.item>* {
position: absolute; /* position child inside parent */
width : 100px; height: 100px;
opacity: 0.7;
}
.rate { text-shadow: 0px 0px 7px rgba(255,255,255,.8) }
.circle {
border: 5px solid rgba(255,255,255,.3);
border-radius: 50%;
filter: blur(1px);
}
/******************************/
/* HOVER eye-candy, demo only */
/******************************/
.item:hover {
background-blend-mode: normal;
color: rgba(255,255,255,1);
}
.item:hover>* {
opacity: 1;
}
.item:hover .circle {
border-color: rgba(255,255,255,.8);
}
/* demo eye-candy */
.item {
/* GMC elevation 1dp */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12);
}
.item:hover {
transform: scale(1.01);
/* GMC elevation 3dp */
box-shadow: 0px 3px 3px -2px rgba(0,0,0,.20),
0px 3px 4px 0px rgba(0,0,0,.14),
0px 1px 8px 0px rgba(0,0,0,.12);
}
/*.item:active:not(:focus) { transform: scale(1) }/* enable for some animation */
<div class="item">
<div class="circle"></div>
<div class="rate">
<span class="amount">10</span>
<span>text</span>
</div>
</div>

Link with border and down triangle transparent

I can't find what I need. I have this code
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
I want the link to have a border with a down triangle at the bottom. But it has to be transparent, because it goes in front of an image. Is that possible?
The shape given in question is a bit complex to achieve with full transparency because of the area cut by the arrow having to be transparent too. Because of this, the techniques that are generally used for creating such tool-tip like shapes cannot be used as-is here. However, there is a still a way to achieve it using CSS and it is as follows:
Use the parent hgroup for the shape with borders on top, left and right and add border-radius. Don't add any border to the bottom because then cutting the space for the arrow would be tough.
Use two pseudo elements (:before and :after) which have the same height as the parent but lesser width such that they produce a tiny gap when positioned absolutely with respect to parent. Add border-bottom alone to these pseudo-elements.
Add a pseudo-element for the arrow on the arrow-down element (a) and create the arrow using rotate(45deg) transforms instead of using the border trick. The transform method is very helpful for creating transparent arrows. Position this arrow again absolutely with respect to the parent.
As we are dealing with transforms, triangle shapes etc the position values need to be calculated based on Math theorems.
* {
box-sizing: border-box;
}
.container {
height: 300px;
width: 500px;
background: url(http://lorempixel.com/500/300/nature/2);
padding: 10px;
}
#subheader {
position: relative;
width: 400px;
height: auto;
border: 1px solid black;
border-bottom: none;
border-radius: 12px;
padding: 10px;
}
.arrow-down{
display: inline-block;
}
.arrow-down:after {
position: absolute;
content: '';
bottom: -10px; /* half the height of the element */
left: 50px; /* some aribitrary position */
height: 20px;
width: 20px;
transform: rotate(45deg);
transform-origin: 50% 50%; /* rotate around center which is at 60px from left */
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#subheader:after {
position: absolute;
content: '';
left: 74px; /* center point of arrow + 1/2 of hypotenuse */
height: 100%;
width: calc(100% - 74px); /* 100% - value of left */
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-right-radius: inherit; /* same border-radius as parent */
}
#subheader:before {
position: absolute;
content: '';
height: 100%;
width: 46px; /* center point of arrow - 1/2 of hypotenuse */
left: 0px;
bottom: 0px;
border-bottom: 1px solid black;
border-bottom-left-radius: inherit; /* same border-radius as parent */
}
<div class='container'>
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
Read More
</hgroup>
</div>
Here is a working version of what you're after.
HTML
<div style="display:none" class="tri-down">Your Content will go into this fancy tri-down</div>
CSS --- I ADDED a background img to show that its transparent as you said that you were going to be having an image behind it.
body {
background: #333 url("http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg") fixed;
}
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
width: 75%;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
opacity: 0.5;
/*you may want to set the z-index level of your tri-down box.
z-index: 100;
*/
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
JSFIDDLE HERE
http://jsfiddle.net/LZoesch/dk43s2qz/
You will want to hide the DIV that is going to house your content. I added it to the above HTML code.
style="display:none"
Then you want to call the link on click and toggle the div class tri-down on/off
<script type="text/javascript">
$(function(){
$('#').click(function(){
$('#').toggle();
$('#').toggle();
});
});
</script>
Here is your orignal code.
<hgroup id="subheader">
<h1>lorem ipsum</h1>
<h2>ipsum lorem</h2>
read More
</hgroup>
If you dont want to set the opacity if your div, you can also try this below.
body {
background: url(http://a2.files.readwrite.com/image/upload/c_fit,cs_srgb,dpr_1.0,q_80,w_620/MTIyMzI3NDY5NDAyMzg1Njg5.jpg);
font-family: sans-serif;
text-align: center;
}
body > div {
color: #000;
margin: 50px;
padding: 15px;
position: relative;
}
.tri-down {
border: 5px solid #000;
content: "";
position: absolute;
}
you can try this one:
.tri-down {
/* Styling block element, not required */
position: relative;
margin-bottom: 2em;
padding: 1em;
border: 1px solid #999;
background: #f3f3f3;
border-radius:5px;
}
/* Required for Down Triangle */
.tri-down:before, .tri-down:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-bottom: 0;
}
/* Stroke */
.tri-down:before {
bottom: -16px;
left: 21px;
/* If 1px darken stroke slightly */
border-top-color: #777;
border-width: 16px;
}
/* Fill */
.tri-down:after {
bottom: -15px;
left: 22px;
border-top-color: #f3f3f3;
border-width: 15px;
}
DEMO
You may need to overlay two images and absolutely position them. Like something along the lines of:
body{
padding:2em;
}
#subheader h1{
font-size:1.5em;
margin-top:0;
}
#subheader h2{font-size:1.2em;}
#subheader
{
position: relative;
max-width:300px;
min-height:1.5em;
padding: 20px;
background: #FFFFFF;
border: #dedede solid 2px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
#subheader:after
{
content: "";
position: absolute;
bottom: -19px;
height:13px;
widht:12px;
left: 10%;
border-style: solid;
border-width: 20px 13px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
#subheader:before
{
content: "";
position: absolute;
bottom: -22.5px;
left: calc(10.5% - 3px) ;
border-style: solid;
border-width: 23px 15px 0px;
border-color: #dedede transparent;
display: block;
width: 0;
z-index: 0;}
Like in this pen

transparent shape with arrow in upper corner

Please see the image below.
I want to add an arrow to the top right of a div which I am treating as editable input box.
Please help me how I can achieve this using CSS.
I cannot use a SVG since I need this as a div to show emoticons as images over it.
<div placeholder="Your message" id="Message">
...
</div>
You can do it like in the below snippet. The method used to achieve the shape is as given below:
The main div element only has a top, bottom and left border. The right border is nullified because the element and its arrows needs to be transparent. With a transparent arrow, if a right border is present that would also get displayed.
The arrow on the right is achieved using a skewed element placed with respect to the right edge of the shape.
The right border of the shape is achieved by using another pseudo-element whose size is the same as the height of the whole container - height of the arrow pseudo-element. This element is positioned with respect to the bottom right of the shape.
You can adjust the height and border-radius as required. I have set the positioning such that even a change in height/width of parent would not affect it.
div.shape {
position: relative;
width: 300px;
height: 100px;
padding: 4px;
margin-top: 20px;
border: 2px solid gray;
border-right: none; /* not required as the shape needs to be transparent */
border-radius: 8px; /* not required as the right border is done through pseudo element */
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
div.shape:before {
position: absolute;
content: '';
top: -2px; /* equal to border top of parent - no need to change*/
right: -6px; /* for positioning - no need to change*/
height: 15%; /* should be changed depending on height of arrow */
width: 10%; /* should be changed depending on width of arrow */
border-top: 2px solid gray;
border-right: 3px solid gray; /* thicker border because skew makes it thin */
/* to achieve the arrow like shape */
-webkit-transform-origin: bottom right;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
transform: skew(-45deg);
}
div.shape:after {
position: absolute;
content: '';
right: -6px; /* for positioning - no need to change*/
height: 85%; /* height of parent - height of arrow */
width: 2%; /* no need to change */
bottom: -2px; /* equal to border bottom of parent - no need to change*/
border-right: 2px solid gray;
border-bottom: 2px solid gray;
border-bottom-right-radius: 8px; /* for producing curve on bottom right */
}
/* Just for demo */
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
background: -moz-linear-gradient(90deg, crimson, indianred, purple);
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
Lorem Ipsum Dolor Sit Amet...
</div>
The arrow can be added to the left side by changing the positioning attributes and the skew direction (from positive angle to negative angle) like in the below snippet.
div.shape {
position: relative;
width: 300px;
height: 100px;
padding: 4px;
margin-top: 20px;
margin-left: 20px;
border: 2px solid gray;
border-left: none; /* not required as the shape needs to be transparent */
border-radius: 8px; /* not required as the right border is done through pseudo element */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
div.shape:before {
position: absolute;
content: '';
top: -2px; /* equal to border top of parent - no need to change*/
left: -6px; /* for positioning - no need to change*/
height: 15%; /* should be changed depending on height of arrow */
width: 10%; /* should be changed depending on width of arrow */
border-top: 2px solid gray;
border-left: 3px solid gray; /* thicker border because skew makes it thin */
/* to achieve the arrow like shape */
-webkit-transform-origin: bottom right;
-webkit-transform: skew(45deg);
-moz-transform: skew(45deg);
transform: skew(45deg);
}
div.shape:after {
position: absolute;
content: '';
left: -6px; /* for positioning - no need to change*/
height: 85%; /* height of parent - height of arrow */
width: 2%; /* no need to change */
bottom: -2px; /* equal to border bottom of parent - no need to change*/
border-left: 2px solid gray;
border-bottom: 2px solid gray;
border-bottom-left-radius: 8px; /* for producing curve on bottom right */
}
/* Just for demo */
body {
background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
background: -moz-linear-gradient(90deg, crimson, indianred, purple);
background: linear-gradient(90deg, crimson, indianred, purple);
}
<div class="shape">
Lorem Ipsum Dolor Sit Amet...
</div>
Filter: drop-shadow()
The compatibility is limited
Yet the effect is pretty cool :P
.inputcontainer {
display: inline-block;
position: relative;
filter: drop-shadow(0px 0px 5px black);
-webkit-filter: drop-shadow(0px 0px 1px black);
}
.input {
display: inline-block;
border: none;
border-radius: 10px;
border-top-right-radius: 0px;
width: 280px;
height: 50px;
background-color: white;
padding-left: 20px;
font-size: 20px;
}
.input:focus {
outline: none;
}
.arrow {
position: absolute;
display: inline-block;
top: 0;
right: -5px;
width: 20px;
height: 20px;
background-color: white;
transform: skew(-45deg);
z-index: -1;
}
<div class="inputcontainer">
<input type="text" class="input" placeholder="Your message"/>
<div class="arrow"></div>
</div>
Box-shadow:
Here the compatibility is a lot better
.inputcontainer {
display: inline-block;
position: relative;
filter: drop-shadow(0px 0px 5px black);
}
.input {
display: inline-block;
border: none;
border-radius: 10px;
border-top-right-radius: 0px;
width: 280px;
height: 50px;
background-color: white;
padding-left: 20px;
font-size: 20px;
box-shadow: 0px 0px 0px 2px gray;
}
.input:focus {
outline: none;
}
.arrow {
position: absolute;
display: inline-block;
top: 0;
right: -8px;
width: 20px;
height: 20px;
background-color: white;
transform: skew(-45deg);
box-shadow: 2px -2px 0px 0px gray;
}
<div class="inputcontainer">
<input type="text" class="input" placeholder="Your message"/>
<div class="arrow"></div>
</div>

Transparent trapezoidal buttons with border and centered text

I'm designing a site where trapezoids are crucial. I'm using the following code to achieve the effect I'm looking for, but am having issues with it: http://jsfiddle.net/9n9uh6f6/9/
The biggest problems are the mouseover area (because I'm using perspective transforms, the clickable area is skewed) and centering text within the shape.
Other than using perspective transforms, how can I make a shape that does the following:
Trapezoid with a colored border and transparent interior.
Trapezoid that can change color when a user hovers over it.
Trapezoid that houses text in the center of the shape.
Here's the CSS I'm using:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
For this case, it would be better to use a skew transform to produce the shape than a rotation with perspective.
We can achieve the shape by using two pseudo-elements skewed in opposite directions and then position one at the left corner and the other at the right corner. Since only the pseudo-elements are skewed and not the main container, the text remains in its expected place (at center-middle).
This shape can (a) support dynamic width (b) have a colored border with transparent background (c) have the text in the center of the shape and (d) support change of background color when hovered on.
.trapezoid {
display: inline-block;
position: relative;
height: 100px;
width: auto;
color: #27628e;
border-top: 2px solid #27628e;
border-bottom: 2px solid #27628e;
line-height: 100px;
text-align: center;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1.6px;
margin: 15px 250px; /* Just for demo */
}
.trapezoid:after,
.trapezoid:before {
position: absolute;
content: '';
top: -2px;
height: 100%;
width: 50%;
z-index: -1;
}
.trapezoid:before {
left: 0px;
border-left: 2px solid #27628e;
border-top: 2px solid #27628e;
transform-origin: left bottom;
transform: skew(10deg);
}
.trapezoid:after {
right: 0px;
border-right: 2px solid #27628e;
border-top: 2px solid #27628e;
transform-origin: right bottom;
transform: skew(-10deg);
}
.trapezoid:hover,
.trapezoid:hover:after,
.trapezoid:hover:before {
background: #27628e;
color: white;
}
/* Just for demo */
body {
background: linear-gradient(90deg, aliceblue, powderblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Click Me!!!
You could also create the same shape using SVG and the angled sides look a tad more smoother while using SVG. The below snippet currently works only for a fixed size container. It should not be an issue as the code in question also has fixed dimensions.
.vector {
position: relative;
height: 100px;
width: -webkit-calc(100px * 1.36);
width: calc(100px * 1.36);
line-height: 100px;
margin: 0px auto; /* Just for demo */
}
svg {
height: 100%;
width: 100%:
}
polygon {
fill: transparent;
stroke-width: 2;
stroke: steelblue;
}
.vector a {
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.6px;
color: steelblue;
text-align: center;
white-space: nowrap;
}
.vector:hover polygon {
fill: steelblue;
}
.vector:hover a {
color: white;
}
/* Just for demo */
body{
background: linear-gradient(90deg, aliceblue, powderblue);
}
<div class='vector'>
<svg viewBox='0 0 136 100' preserveaspectratio='none'>
<polygon points='1,2 18,98 118,98 135,2' />
</svg>
<a href='#'>Click Me!!!</a>
</div>

A custom style with pure CSS and HTML

I am trying to create a style using CSS and HTML. My desire style is something similar to this.
Most of things of that style have been done with pure CSS and HTML.
This is my CSS -
.filter-box {
float: left;
margin: 0 3% 0 2%;
width :29%;
> .main-cat {
background-color: #FFFFFF;
display: block;
margin-top: 25px;
padding: 10px;
position: relative;
> h3 {
margin: 0;
}
}
> .main-cat:after {
border-bottom: 15px solid rgba(0, 0, 0, 0);
border-left: 15px solid #FFFFFF;
border-top: 15px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
margin-top: -15px;
position: absolute;
right: -14px;
top: 50%;
width: 0;
}
> .main-cat:first-child {
margin-top: 0;
}
> .sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
> h4 {
margin: 0;
}
}
}
My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.
Can any body tell me is this possible with pure CSS and HTML without using any image?
This is my code so far: JS BIN
Any comments would be greatly welcome.
Thank You.
Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO
The CSS update could be :(see comment for explanation )
.filter-box {
background:linear-gradient(to right,
transparent 15px,
white 15px,
white 17px,
transparent 17px); /* draws the vertical bar aside list-items */
}
background:linear-gradient( /* draw orange background */
to right,
transparent 40px ,
#FF9000 40px),
linear-gradient(/* draw middle white bar */
to bottom,
transparent 49%,
white 48%,
white 52%,
transparent 51%
) right no-repeat;
background-size:
auto auto/* no need to resize first gradient */,
95% 100% /*reduce width of second gradient */;
display:list-item;/* lests get a round bullet if this is not a li */
color:white; /* give color to bullet */
font-size:2.2em;/* resize bullet */
list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
margin: 0;
font-size:0.6em;/* resize to a normal font-size from em value inherited */
display:inline-block;/* stands aside bullet */
text-align: right;/* align to right */
width:85%;/* keep min/max-width under control*/
}
Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.
As mentionned earlier , this menu/list deserve to be build from an HTML list.
Demo: http://jsfiddle.net/abhitalks/4LB5t/
CSS:
.sub-cat:before {
content: ' ';
border-left: 1px solid white;
display: inline-block;
width: 16px; height: 42px;
position: absolute;
left: 40px; margin: 0px; margin-top: -8px;
z-index: 10;
}
.sub-cat:after {
content: '';
display: inline-block;
width: 8px; height: 8px;
background-color: white;
border-radius: 50%;
position: absolute;
left: 36px; margin-top: -8px;
}
Update:
Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/
Just increase the height on .sub-cat:before.
Update 2:
Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/
Added your horizontal border as well. The only changes in the css are:
.sub-cat:before {
...
border-bottom: 1px solid white;
margin-top: -26px;
z-index: -1;
}
You have to tweak and tune the styles to achieve what you want. Hope that helps.
You can use the :before and :after elements in the sub-category to design the circle and left border.
Use the :before to make the circle as #megha outlined, and position it with the vertical center of the sub-cat.
Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat
Then use the :after and style it as
width: 2px;
height: 100%;
top: 0;
left: -10px
Hope this helps
Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax)
http://codepen.io/anon/pen/dJepq
.sub-cat {
background: #FF9000;
margin-left: 25px;
margin-top: 5px;
padding: 8px 10px;
text-align: right;
position: relative;
&:before {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ff9000;
content: "";
position: absolute;
top: 12px;
left: -20px;
}
&:after {
width: 2px;
top: -5px;
bottom: 0;
left: -16px;
content: "";
position: absolute;
background-color: #ff9000;
}
}
}
Using :after and :before pseudo element you can achieve the result.
Check the DEMO.
Here is the CSS would be required.
.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}
.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: " ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}
.sub-cat h4:after{
content: " ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}
A circular bullet can be created using the html :
<div id="circle"></div>
and its corresponding css
#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}
I am unable to understand what "let border" means.Hope this helps!