I need to draw vertical lines inside a semi-circle which is present inside the egg shaped div.
HTML
<body>
<div id="white">
<div id="yolk">
</div>
<div id="verticalLine1">
</div>
</div>
</body>
CSS
body {
background-color: #98FDF5;
position: relative;
}
#white {
display: block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index: 2;
top: 130px;
left: 20px;
border-radius: 0 0 80px 80px;
border: 0.08em solid black;
padding-bottom: -50px;
}
#verticalLine1 {
border-top: 0.08em solid black;
z-index: 4;
padding-top: 10%;
}
Fiddle for my work.
How about using a repeating-linear-gradient to do the job. Browser support is not that bad.
Can i use CSS Repeating Gradients.
You can easily rotate the lines if you wish.
body{
background-color:#98FDF5;
position:relative;
}
#white {
display:block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index:2;
top:130px;
left:20px;
border-radius: 0 0 80px 80px;
border:0.08em solid black;
padding-bottom:-50px;
background-image:repeating-linear-gradient(90deg, white -14px, white 27px, black 27px, black 29px);
}
#verticalLine1 {
top:100px;
border: thick solid black;
}
<body>
<div id="white">
<div id="yolk">
</div>
<div id="verticalLine1">
</div>
</div>
</body>
I will suggest a simple solution
-Add <hr> tag to your HTML Code
Give your tag a class="line"
In your css class add this
transform: rotate(90deg);
Then you can margin it where ever you want.
Edited*
If the <hr> dissapears then try give it a
possition: absolute
Would this be a start? Simple and browser support down to IE9.
body{
background-color:#98FDF5;
position:relative;
}
#white {
display:block;
width: 180px;
height: 240px;
background-color: #ffffff;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
#white #yolk {
position: absolute;
width: 140px;
height: 70px;
z-index:2;
top:130px;
left:20px;
border-radius: 0 0 80px 80px;
border:0.08em solid black;
padding-bottom:-50px;
text-align: center;
overflow: hidden;
}
.verticalLine1 {
display: inline-block;
position: relative;
width: 8px;
height: 100%;
border: 0px solid black;
border-width: 0 4px;
margin: 0 2px;
}
<div id="white">
<div id="yolk">
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
<div class="verticalLine1"></div>
</div>
</div>
Related
I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown when you resize the window.
Is there any other way to do this? Or maybe fix this one in IE.
EDIT The circle must not use a border, it should be transparent.
body,
html {
font-size: 18px;
}
body {
background-color: #fff
}
.avatar {
width: 90px;
height: 90px;
position: absolute;
background-color: red;
top: -115px;
left: 5px;
border-radius: 80px;
}
.wrap {
display: block;
margin: 100px auto 0 auto;
width: 90%;
position: relative;
}
.rect-left,
.rect-right {
position: relative;
width: 50%;
height: 150px;
float: left;
}
.rect-left {
margin-left: -50px;
}
.rect-right {
margin-right: -50px;
}
.inner {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.rect-left .inner {
left: 50px;
right: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rect-right .inner {
left: 0;
right: 50px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rect {
float: left;
height: 100px;
width: 100px;
background: rgba(0, 0, 0, 0.8);
position: relative;
top: 50px;
}
.circle {
display: block;
width: 100px;
height: 50px;
top: -50px;
left: 0;
overflow: hidden;
position: absolute;
}
.circle:after {
content: '';
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background: rgba(0, 0, 0, 0);
position: absolute;
top: -110px;
left: -40px;
border: 40px solid rgba(0, 0, 0, 0.8);
}
<div class="wrap">
<div class="rect-left">
<div class="inner"></div>
</div>
<div class="rect"> <span class="circle"></span>
<div class="avatar"></div>
</div>
<div class="rect-right">
<div class="inner"></div>
</div>
</div>
You can do this using a single element (plus a pseudo element) using radial-gradient background for the parent element while the pseudo-element creates the circle.
div:before { /* creates the red circle */
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
/* only the below creates the transparent gap and the fill */
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */
}
/* just for demo */
body,
html {
font-size: 18px;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>
You could use a circular gradient
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black);
border-radius: 8px;
position: relative;
}
.circle {
width: 120px;
height: 120px;
background: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
<span class="circle"></span>
</div>
With an inline svg it is very simple :
a circle element
a path element with an arc comand for the indented circle
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
svg{display:block;}
<svg viewbox="0 0 10 3.5">
<path d="M4.2 1 A0.85 0.85 0 0 0 5.8 1 H10 V3.5 H0 V1z" fill="#333" />
<circle cx="5" cy="0.7" r="0.7" fill="red" />
</svg>
Or if you really want to use CSS, you can achieve the shape with the approach described in: Transparent half circle cut out of a div.
Note that the code is much longer than the svg approach:
.container{
position:relative;
height:250px;
text-align:center;
}
.circle{
position:relative;
display:inline-block;
width:100px; height:100px;
background:red;
border-radius:50%;
z-index:2;
}
.rect{
position:absolute;
top:50px; left:0;
width:100%; height:200px;
border-radius:10px;
overflow:hidden;
z-index:1;
}
.rect:before{
content:'';
position:absolute;
top:-60px; left:50%;
margin-left:-60px;
width:120px; height:120px;
border-radius:50%;
box-shadow:0 0 0 99999px #333;
}
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
<div class="container">
<div class="circle"></div>
<div class="rect"></div>
</div>
I want to design the following for displaying profile picture. I tried using border-style: dashed, but that's not what I want; I want only three lines (dashes) in the border. How can I accomplish this?
Here's what I tried:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px dashed;
background-color: yellow;
}
<!DOCTYPE html>
<html>
<body>
<div id="circle"></div>
</body>
</html>
The effect I desire:
Here is an idea with multiple background:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px solid transparent; /* Control the thickness*/
background:
url(https://picsum.photos/id/100/200/200) center/cover content-box,
linear-gradient(blue,blue) top /100% 20% border-box,
linear-gradient(blue,blue) bottom left /35% 50% border-box,
linear-gradient(blue,blue) bottom right/35% 50% border-box;
background-repeat:no-repeat;
}
<div id="circle"></div>
If you want space between image and border add an extra layer:
#circle {
border-radius: 100%;
width: 100px;
height: 100px;
border: 5px solid transparent; /*Control the thickness*/
padding:3px; /*control the space*/
background:
url(https://picsum.photos/id/100/200/200) center/cover content-box,
linear-gradient(white,white) padding-box,
linear-gradient(blue,blue) top /100% 20% border-box,
linear-gradient(blue,blue) bottom left /35% 50% border-box,
linear-gradient(blue,blue) bottom right/35% 50% border-box;
background-repeat:no-repeat;
}
<div id="circle"></div>
I tried something like that, not sure if entirely fit your needs..but give it a try, maybe it's a good starting point for you. Play with the numbers from css file and maybe you got exactly what you need.
Codesandbox here: https://codesandbox.io/s/vibrant-glade-uo7bg
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: gray;
position: relative;
}
#shadow-1 {
position: absolute;
top: -1px;
left: -1px;
width: 85px;
height: 85px;
transform: rotate(-20deg);
border-radius: 50%;
box-shadow: 5px 5px 0 -4px blue;
}
#shadow-2 {
position: absolute;
top: -5px;
left: -2.5px;
transform: rotate(-40deg);
width: 85px;
height: 85px;
border-radius: 50%;
box-shadow: 5px -5px 0 -4px blue;
}
#shadow-3 {
position: absolute;
top: -1px;
left: -4px;
width: 85px;
height: 85px;
transform: rotate(20deg);
border-radius: 50%;
box-shadow: -5px 5px 0 -4px blue;
}
<h1>Hello Circle!</h1>
<div>
<div class="circle">
<div id="shadow-1"></div>
<div id="shadow-2"></div>
<div id="shadow-3"></div>
</div>
</div>
I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown when you resize the window.
Is there any other way to do this? Or maybe fix this one in IE.
EDIT The circle must not use a border, it should be transparent.
body,
html {
font-size: 18px;
}
body {
background-color: #fff
}
.avatar {
width: 90px;
height: 90px;
position: absolute;
background-color: red;
top: -115px;
left: 5px;
border-radius: 80px;
}
.wrap {
display: block;
margin: 100px auto 0 auto;
width: 90%;
position: relative;
}
.rect-left,
.rect-right {
position: relative;
width: 50%;
height: 150px;
float: left;
}
.rect-left {
margin-left: -50px;
}
.rect-right {
margin-right: -50px;
}
.inner {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.rect-left .inner {
left: 50px;
right: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rect-right .inner {
left: 0;
right: 50px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rect {
float: left;
height: 100px;
width: 100px;
background: rgba(0, 0, 0, 0.8);
position: relative;
top: 50px;
}
.circle {
display: block;
width: 100px;
height: 50px;
top: -50px;
left: 0;
overflow: hidden;
position: absolute;
}
.circle:after {
content: '';
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background: rgba(0, 0, 0, 0);
position: absolute;
top: -110px;
left: -40px;
border: 40px solid rgba(0, 0, 0, 0.8);
}
<div class="wrap">
<div class="rect-left">
<div class="inner"></div>
</div>
<div class="rect"> <span class="circle"></span>
<div class="avatar"></div>
</div>
<div class="rect-right">
<div class="inner"></div>
</div>
</div>
You can do this using a single element (plus a pseudo element) using radial-gradient background for the parent element while the pseudo-element creates the circle.
div:before { /* creates the red circle */
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
/* only the below creates the transparent gap and the fill */
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */
}
/* just for demo */
body,
html {
font-size: 18px;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>
You could use a circular gradient
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black);
border-radius: 8px;
position: relative;
}
.circle {
width: 120px;
height: 120px;
background: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
<span class="circle"></span>
</div>
With an inline svg it is very simple :
a circle element
a path element with an arc comand for the indented circle
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
svg{display:block;}
<svg viewbox="0 0 10 3.5">
<path d="M4.2 1 A0.85 0.85 0 0 0 5.8 1 H10 V3.5 H0 V1z" fill="#333" />
<circle cx="5" cy="0.7" r="0.7" fill="red" />
</svg>
Or if you really want to use CSS, you can achieve the shape with the approach described in: Transparent half circle cut out of a div.
Note that the code is much longer than the svg approach:
.container{
position:relative;
height:250px;
text-align:center;
}
.circle{
position:relative;
display:inline-block;
width:100px; height:100px;
background:red;
border-radius:50%;
z-index:2;
}
.rect{
position:absolute;
top:50px; left:0;
width:100%; height:200px;
border-radius:10px;
overflow:hidden;
z-index:1;
}
.rect:before{
content:'';
position:absolute;
top:-60px; left:50%;
margin-left:-60px;
width:120px; height:120px;
border-radius:50%;
box-shadow:0 0 0 99999px #333;
}
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
<div class="container">
<div class="circle"></div>
<div class="rect"></div>
</div>
I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown when you resize the window.
Is there any other way to do this? Or maybe fix this one in IE.
EDIT The circle must not use a border, it should be transparent.
body,
html {
font-size: 18px;
}
body {
background-color: #fff
}
.avatar {
width: 90px;
height: 90px;
position: absolute;
background-color: red;
top: -115px;
left: 5px;
border-radius: 80px;
}
.wrap {
display: block;
margin: 100px auto 0 auto;
width: 90%;
position: relative;
}
.rect-left,
.rect-right {
position: relative;
width: 50%;
height: 150px;
float: left;
}
.rect-left {
margin-left: -50px;
}
.rect-right {
margin-right: -50px;
}
.inner {
position: absolute;
top: 0;
left: 50px;
right: 0;
bottom: 0;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.rect-left .inner {
left: 50px;
right: 0;
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rect-right .inner {
left: 0;
right: 50px;
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rect {
float: left;
height: 100px;
width: 100px;
background: rgba(0, 0, 0, 0.8);
position: relative;
top: 50px;
}
.circle {
display: block;
width: 100px;
height: 50px;
top: -50px;
left: 0;
overflow: hidden;
position: absolute;
}
.circle:after {
content: '';
width: 100px;
height: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
background: rgba(0, 0, 0, 0);
position: absolute;
top: -110px;
left: -40px;
border: 40px solid rgba(0, 0, 0, 0.8);
}
<div class="wrap">
<div class="rect-left">
<div class="inner"></div>
</div>
<div class="rect"> <span class="circle"></span>
<div class="avatar"></div>
</div>
<div class="rect-right">
<div class="inner"></div>
</div>
</div>
You can do this using a single element (plus a pseudo element) using radial-gradient background for the parent element while the pseudo-element creates the circle.
div:before { /* creates the red circle */
position: absolute;
content: '';
width: 90px;
height: 90px;
top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */
left: calc(50% - 45px);
background-color: red;
border-radius: 50%;
}
div {
position: relative;
margin: 100px auto 0 auto;
width: 90%;
height: 150px;
border-radius: 6px;
/* only the below creates the transparent gap and the fill */
background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */
}
/* just for demo */
body,
html {
font-size: 18px;
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div></div>
You could use a circular gradient
div {
height: 150px;
margin: 5em 2em;
background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black);
border-radius: 8px;
position: relative;
}
.circle {
width: 120px;
height: 120px;
background: red;
border-radius: 50%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-image: url(http://www.fillmurray.com/1000/1000);
background-size: cover;
}
<div>
<span class="circle"></span>
</div>
With an inline svg it is very simple :
a circle element
a path element with an arc comand for the indented circle
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
svg{display:block;}
<svg viewbox="0 0 10 3.5">
<path d="M4.2 1 A0.85 0.85 0 0 0 5.8 1 H10 V3.5 H0 V1z" fill="#333" />
<circle cx="5" cy="0.7" r="0.7" fill="red" />
</svg>
Or if you really want to use CSS, you can achieve the shape with the approach described in: Transparent half circle cut out of a div.
Note that the code is much longer than the svg approach:
.container{
position:relative;
height:250px;
text-align:center;
}
.circle{
position:relative;
display:inline-block;
width:100px; height:100px;
background:red;
border-radius:50%;
z-index:2;
}
.rect{
position:absolute;
top:50px; left:0;
width:100%; height:200px;
border-radius:10px;
overflow:hidden;
z-index:1;
}
.rect:before{
content:'';
position:absolute;
top:-60px; left:50%;
margin-left:-60px;
width:120px; height:120px;
border-radius:50%;
box-shadow:0 0 0 99999px #333;
}
body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover;
<div class="container">
<div class="circle"></div>
<div class="rect"></div>
</div>
This question already has answers here:
Elongated hexagon shaped button using only one element
(4 answers)
Closed 7 years ago.
I need to code a polygon button that has an outline with pure css and html. This is what I have right now but I can't figure out how to add the outline. This need to be supported in IE as well. How do I do this?
/**** CSS ***/
#statement .polygon {
width: 290px;
height: 75px;
background: #590f20;
position: relative;
color: #F94141;
text-align: center;
font-size: 1.8em;
line-height: 2.9em;
font-weight: 400;
text-transform: uppercase;
margin-top: 50px;
margin-bottom: 35px;
}
#statement .bottom:before {
content: "";
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid #590f20;
border-bottom: 37.5px solid transparent;
}
#statement .bottom:after {
content: "";
position: absolute;
top: 0px;
left: 290px;
width: 0;
height: 0;
border-left: 25px solid #590f20;
border-right: 25px solid transparent;
border-bottom: 37.5px solid transparent;
}
#statement .top:before {
content: "";
position: absolute;
bottom: 37.5px;
left: -50px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid #590f20;
border-top: 37.5px solid transparent;
}
#statement .top:after {
content: "";
position: absolute;
bottom: 37.5px;
left: 290px;
width: 0;
height: 0;
border-left: 25px solid #590f20;
border-right: 25px solid transparent;
border-top: 37.5px solid transparent;
}
<div id="statement">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="heading">
<h1></h1>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3 col-md-offset-4-5">
<a class="button" href="#button">
<div class="polygon bottom top">
Work With Us
</div>
</a>
</div>
</div>
</div>
<!-- /.containter -->
</div>
<!-- /#statement -->
You can try using a css clip-path ploygon and then add another div to get a border.
#statement .polygon .outer {
display: inline-block;
width: 290px;
height: 75px;
background: #590f20;
position: relative;
color: #F94141;
text-align: center;
font-size: 1.8em;
line-height: 2.9em;
font-weight: 400;
text-transform: uppercase;
-webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
-webkit-transform: scale(0.98, 0.95);
transform: scale(0.98, 0.95);
}
#statement .polygon.border {
-webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px);
background-color: orange;
}
<div id="statement">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="heading">
<h1></h1>
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-3 col-md-offset-4-5">
<a class="button" href="#button">
<div class="polygon border">
<span class="outer">
Work With Us
</span>
</div>
</a>
</div>
</div>
</div>
<!-- /.containter -->
</div>
<!-- /#statement -->
Whilst SVG may be an option here, I (have to) add a CSS version. Here's a quick demo, which is using a fixed height but variable width:
div {
margin: 50px;
height: 50px;
min-width: 100px;
background: lightgray;
position: relative;
display: inline-block;
border-top: 5px solid gold;
border-bottom: 5px solid gold;
padding-left: 30px;
padding-right: 30px;
line-height: 50px;
cursor:pointer;
}
div:before,
div:after {
content: "";
position: absolute;
top: -5px;
height: 37px;
width: 37px;
background: inherit;
transform: rotate(45deg);
transform-origin: top left;
}
div:before {
left: 0;
border-left: 5px solid gold;
border-bottom: 5px solid gold;
}
div:after {
left: 100%;
border-top: 5px solid gold;
border-right: 5px solid gold;
}
/*demo only*/
html {background: #222;}
<div>SOME TEXT</div>