This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 3 years ago.
I am trying to create a button with chopped corner, the only challange is to make that corner transparent, instead of background color of that corner.
Attached the exmple I am trying to achieve
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 24px;
height: 24px;
background: #cccccc;
position: absolute;
right: -12px;
bottom: -12px;
transform: rotate(-132deg);
}
<div class="wrapper">
This is button
</div>
I believe that modifying the button's background - using linear-gradient from transparent to the specific color - is what you're looking for:
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
And in context:
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
background: linear-gradient(315deg, transparent 15px, #07926D 0px);
}
<div class="wrapper">
This is button
</div>
You can do something like this, I am in hurry so made this, You can change anything as per your need.
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 10px 16px 35px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 26px 0px 20px 20px;
border-color: transparent transparent transparent #07926D;
right: -20px;
top: 2px;
}
a.btn-border-tilt:before {
content: "";
width: 0;
position: absolute;
height: 0;
border-style: solid;
border-width: 0px 0 60px 30px;
border-color: transparent transparent transparent #07926D;
right: -4px;
top: -15px;
transform: rotate(90deg);
}
<div class="wrapper">
This is button
</div>
Check this with after and before and changes padding for text center
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 12px 16px 30px;
position: relative;
text-decoration: none;
}
.btn-border-tilt:before {
content: "";
width: 18px;
height: 30px;
background: #07926D;
position: absolute;
right: -18px;
top: 0px;
}
.btn-border-tilt:after {
content: "";
width: 0;
height: 0;
position: absolute;
width: 0;
height: 0;
border-top: 18px solid #07926D;
border-right: 18px solid transparent;
right: -18px;
bottom: 0px;
}
<div class="wrapper">
This is button
</div>
Create a triangle at the bottom.
Reference: CSS Tricks
.wrapper {
padding:40px;
width: 100%;
height: 150px;
background: #aaaaaa;
}
.btn-border-tilt {
display: inline-block;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background-color: #07926D;
padding: 16px 30px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn-border-tilt:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
border: 12px solid #aaaaaa;
border-left-color: transparent;
border-top-color: transparent;
}
<div class="wrapper">
This is button
</div>
Related
I want to give border like this. Please check below code.
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -9px;
top: -8px;
width: 106%;
height: 125%;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
My problem is when content increases inside button border alignment also getting disturbed. Please give me solution on this.
No need complex calculation. Remove the width and consider right like your did with left. Same thing for height:
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
You need to combine dynamic and static values together width: calc(100% + 7px);
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
&:before {
content: "";
border: 4px solid red;
position: absolute;
left: -7px;
top: -6px;
width: calc(100% + 7px);
height: 111%;
border-radius: 30px;
}
}
Fiddle
Just add some padding to the border and adjust the top and left values to fit your font size.
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 16px;
color: #fff;
position: relative;
display: block;
margin-bottom: 10px;
&::before{
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
padding: 4px;
width: 100%;
height: 100%;
border-radius: 30px;
}
}
https://jsfiddle.net/d4cugr07/
When applying transform:scale to my element, the border-colors get messed up. Would like to know if this is a known issue and has a solution? If I remove the scale the animation works fine and borders return to normal. I have also tried both ways, when scaling up and down the issue persists. Tried zoom, transform-origin, nothing seems to fix this weird issue. Also this has no issues in chrome.
JSfiddle
body {
background-color: lightblue;
}
.player-chromecast {
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: lightblue;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
top: 3px;
}
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
body {
background-color: #20262e;
}
h1 {
color: white;
text-align: center;
}
.player-chromecast:hover .reception {
border-bottom-color: transparent;
border-left-color: transparent;
}
p {
font-family: verdana;
font-size: 20px;
}
.player-chromecast {
border-left: 1px solid #fff !important;
border: 2px solid white;
border-radius: 4px;
width: 22px;
height: 17px;
position: relative;
margin: 10px;
border-bottom: 1px solid #fff !important;
}
.player-chromecast:hover {
transform: scale(1.1)
}
.broadcast {
background-color: #20262e;
width: 18px;
height: 19px;
position: absolute;
bottom: -3px;
left: -2px;
}
.broadcast:after {
content: '';
height: 5px;
width: 5px;
border-top-right-radius: 20px;
position: absolute;
top: 13px;
background-color: white;
}
.reception {
border: 2px solid white;
border-bottom-color: transparent;
border-left-color: transparent;
border-top-right-radius: 20px;
position: absolute;
}
.first-bar {
height: 6px;
width: 6px;
border-left: 0px;
top: 8px;
}
.second-bar {
height: 11px;
width: 11px;
border-left: 0px;
top: 3px;
}
<!DOCTYPE html>
<div class="player-chromecast">
<div class="broadcast">
<div class="reception first-bar"></div>
<div class="reception second-bar"></div>
</div>
</div>
Please check now in firefox or any other browsers it working correctly i mean border is not there on hover .....Let me know if you still get same bugs
I'm using Easy-UI layout, the blue part is the "north" layout to show nav, and down that is the layout part of "center".
But the pulldown div is coverd by "center" layout panel when mouse move-on.
I set z-index into pulldown div, but it doesn't work. How can I fix is?
.hd-main .has-pulldown {
cursor: pointer;
position: relative;
*z-index: 10000
}
.hd-main .pulldown {
position: absolute;
cursor: default;
display: none;
top: 30px;
left: 0
}
.hd-main .pulldown .arrow {
*margin-bottom: -1px;
_margin-bottom: 0;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #F6F6F9 transparent;
_filter: chroma(color=tomato);
_border-color: tomato tomato #F6F6F9 tomato;
position: relative;
display: block;
left: 20px;
z-index: 2
}
.hd-main .pulldown .content {
background: #F6F6F9;
color: #333;
text-align: left;
border-radius: 3px;
border: rgb(175, 175, 175) 1px solid;
border-width: 0 1px 1px 1px;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
position: relative;
z-index: 1
}
.hd-main .pulldown-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0)
}
.hd-main .navs .def-nav,
.hd-main .navs .pulldown-nav,
.hd-main .navs .separate {
display: block;
float: left;
height: 48px;
font: 18px/30px"Microsoft YaHei", "Microsoft JhengHei";
color: #d8d8d8;
text-align: center;
width: 90px;
line-height: 48px
}
.hd-main .navs .pulldown-nav {
position: relative
}
.hd-main .navs .pulldown-nav em {
position: absolute;
display: block;
left: 69px;
top: 18px;
height: 12px;
width: 12px;
font-size: 0;
background-position: -89px -45px
}
.hd-main .navs .pulldown-nav:hover .f-icon,
.hd-main .navs .pulldown-nav:active .f-icon {
position: absolute;
display: block;
right: 11px;
top: 18px;
height: 12px;
width: 12px;
font-size: 0;
background-position: -89px -55px
}
<ul>
<li class="info-i user-name has-pulldown">
<em class="f-icon pull-arrow"></em>
<span class="name top-username">David</span>
<div class="pulldown user-info">
<em class="arrow"></em>
<div class="content">
<span class="li">aa</span>
<span class="li">bb</span>
<span class="li">cc</span>
<span class="li">dd</span>
<span class="separate-li no-height"></span>
<span class="li">Log Out</span>
</div>
</div>
</li>
</ul>
I was trying to make a CSS shape like this. I need to make exact the shape shown in the attached image. How to make this?
Please help.
Fiddle link link
CSS
#activityIcon {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#activityIcon:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
Try this :
UPDATE...
MARKUP:
<div id="activityIcon">
<div class=concaveTop></div>
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#757575;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after{
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #757575;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #757575;
right: -18px;
}
.concaveTop:before, .concaveTop:after{
content: '';
position: absolute;
width: 34px;
height: 32px;
}
.concaveTop{
position: absolute;
top: 0;
width: 314px;
height: 28px;
left: -50px;
overflow: hidden;
box-shadow: 0 -4px 0 #757575;
}
.concaveTop:before{
left: 1px;
box-shadow: 20px -24px 0 3px #757575;
border-radius: 50%;
}
.concaveTop:after{
right: 15px;
box-shadow: -18px -24px 0 3px #757575;
border-radius: 50%;
z-index: 1;
}
DEMO
MARKUP:
<div id="activityIcon">
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#333;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after {
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #333;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #333;
right: -18px;
}
I'm not sure if my answer provides anything that kougiland's doesn't, but I did it so I figured I might as well post it.
It looks like this.
Here's the codepen.
The HTML looks like this.
<div class="tab-bar">
<div class="tab">▴</div>
<div class="tab">▴</div>
<div class="tab">▴</div>
</div>
The CSS looks like this.
body {
background-color: #eee;
}
.tab-bar {
overflow: hidden;
text-align: center;
}
.tab {
margin: 0 1.55rem;
color: #999;
display: inline-block;
position: relative;
top: 0.1rem;
width: 9rem;
font-size: 3rem;
line-height: 3rem;
background-color: #666;
transform: perspective(4rem) rotateX(-20deg);
border-radius: 0 0 1rem 1rem;
}
.tab::before,
.tab::after {
content: " ";
display: block;
position: absolute;
width: 1rem;
height: 1rem;
top: -1rem;
border-color: #666;
border-style: solid;
}
.tab::before {
left: -1rem;
border-radius: 0 2rem 0 0;
border-width: 1rem 1rem 0 0;
}
.tab::after {
right: -1rem;
border-radius: 2rem 0 0 0;
border-width: 1rem 0 0 1rem;
}
FIDDLE DEMO
I've got a problem where I have a container that has a max-height set, however for an unknown reason the wrapper constantly shows the vertical scroll bar.
The only thing I can find that might be the problem is the :after pseudo class on the .right class. If I remove this the scroll bars go. Why is this? The :after content is positioned absolutely, it shouldn't have any affect on the scroll bar...
For reference, the max-height that's not being reached is set on the .emails class
This is the CSS that matters - couple of extra bits on the fiddle;
.indicator_triangle {
position: absolute;
bottom: -24px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 12.5px 20px 12.5px;
border-color: transparent transparent #fff transparent;
}
.comm_dd {
position: absolute;
top: 15px;
border: 3px solid $green;
display: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
border: 3px solid $green;
width: 170px;
background-color: #fff;
z-index: 10;
list-style: none;
margin: 0;
padding: 5px;
width: 350px;
font-size: 12px;
.e_container {
.emails {
overflow-y: auto;
// min-height: 180px;
max-height: 350px;
border-top: 1px solid $grey_med;
}
h4 {
margin-top: 0;
margin-bottom: 5px
}
p {
color: #888;
margin-bottom: 4px;
}
}
.left {
width: 72%;
float: left;
div {
margin-right: 15px;
}
}
.right {
width: 25%;
float: left;
font-size: 11px;
&:after {
position: absolute;
top: 14px;
right: 4px;
content:"\00b0";
font-size: 32px;
}
}
.subj {
font-weight: bold;
}
li {
line-height: 16px;
a {
position: relative;
padding: 6px 5px;
display: block;
color: $grey;
border-top: 1px solid #ddd;
color: #888;
padding: 7px 5px;
&:hover {
background-color: darken(#fff, 10%);
}
}
.remaining_count {
top: 9px;
right: 9px;
}
&:first-child a {
border-top: none;
}
}
.indicator_triangle {
top: -15px;
left: 5px;
}
}
You could set overflow:hidden to the .comm_dd li selector to prevent the :after pseudo content from causing the overflow on the list item.