I'm trying to build simple pricing table using bootstrap 4 card element, but i can't find solution to one problem.
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
border: 3px solid $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
border: 3px solid $primary-color;
width: 100%;
}
Live Codepen
This is code responsible for drawing line in top part of the tables on the hover. The problem is i have no idea how to hide this small green rectangle in the left top corner of each table. I was trying to make border white and change to green once customer hover table. It works, but then fade effect is visible. I would prefer to keep it as it's now, just somehow get rid of this rectangle.
Remove border from :after and add height: 3px instead, also remove border from :after on :hover
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 3px;
background: $primary-color;
transition: 0.5s;
}
&:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08);
&:after {
width: 100%;
}
Related
Problem
I'm creating a dropdown menu based on this codepen for my website and I'm trying to isolate the dropdown menu for just a button, within the same div. The code is working for a single button, but when ther's two or more, they all share the same dropdown... Here's an example.
▲ This is the button with the dropdown, it works
▲ But the second button, within the same DIV, also gets the same dropdown...
I believe it's something related to position:absolute, because it's somewhat better when I remove it (but the dropdown position also go to the div).
What I've tried
I was expecting this dropdown menu to be only for an ID, e.g. translate. But when I add the dropdown, it works for all buttons inside the same container div, which I do not want.
This is the code which I have tried:
/* Page settings */
.page-settings {
#include flex-center;
position: fixed;
flex-direction: row;
z-index: 10;
top: 3vw;
right: 2vw;
.btn {
#include flex-center;
#include ease-in-out;
width: min(10vw, 80px);
aspect-ratio: 1 / 1;
border-radius: 50%;
margin: 0 4%;
background-color: var(--color-grey-4);
border: none;
box-shadow: var(--box-shadow-1);
i {
font-size: var(--size-button);
color: var(--color-grey-1);
pointer-events: none;
}
&:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px var(--color-white);
}
}
}
#translate {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
.material-icons {
border-radius: 100%;
animation: ripple 0.6s linear infinite;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(#000, .1);
text-align: left;
opacity: 0;
visibility: hidden;
&:before {
content: '';
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(#000, .05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
a {
border-bottom: 0;
}
}
}
a {
display: block;
border-bottom: 1px solid rgba(#000, .05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
}
}
#media screen and (max-width: 600px) {
.page-settings {
flex-direction: column;
.btn {
margin: 7% 2%;
}
}
}
The minimal working code is below:
body {
background: #f5f5f5;
height: 100%;
color: rgba(0, 0, 0, 0.87);
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
outline: 0;
display: inline-flex;
align-items: center;
justify-content: space-between;
background: #5380f7;
min-width: 260px;
border: 0;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 16px 20px;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}
.btn:focus .dropdown,
.btn:active .dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
.btn .material-icons {
border-radius: 100%;
-webkit-animation: ripple 0.6s linear infinite;
animation: ripple 0.6s linear infinite;
}
.btn .dropdown {
position: absolute;
top: 100%;
left: 0;
background: #fff;
width: 100%;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
text-align: left;
opacity: 0;
visibility: hidden;
transition: 0.3s ease;
}
.btn .dropdown:before {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 0;
height: 0;
box-shadow: 2px -2px 6px rgba(0, 0, 0, 0.05);
border-top: 6px solid #fff;
border-right: 6px solid #fff;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
transform: rotate(-45deg);
mix-blend-mode: multiple;
}
.btn .dropdown li {
z-index: 1;
position: relative;
background: #fff;
padding: 0 20px;
color: #666;
}
.btn .dropdown li.active {
color: #5380f7;
}
.btn .dropdown li:first-child {
border-radius: 4px 4px 0 0;
}
.btn .dropdown li:last-child {
border-radius: 0 0 4px 4px;
}
.btn .dropdown li:last-child a {
border-bottom: 0;
}
.btn .dropdown a {
display: block;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 16px 0;
color: inherit;
font-size: 10px;
text-decoration: none;
}
#-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
#keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1),
0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0.1),
0 0 0 60px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.1),
0 0 0 40px rgba(255, 255, 255, 0.1), 0 0 0 60px rgba(255, 255, 255, 0.1),
0 0 0 80px rgba(255, 255, 255, 0);
}
}
<div class="container">
<!-- Btn-->
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
<button class="btn">
<span>Account Settings</span><i class="material-icons">public</i>
<ul class="dropdown">
<li class="active">Profile Information</li>
<li>Change Password</li>
<li>
Become <b>PRO</b>
</li>
<li>Help</li>
<li>Log Out</li>
</ul>
</button>
</div>
My Research
I tried to create a new class called .dropdown-menu too, to no avail. Tried changing the position absolute and top+Left positioning to a mix between grid and grid-area, but I couldn't get it to work too.
I've googled it, searched websites and the answers are various, but didn't fit the scope of my problem.
Question
How could I isolate this dropdown-menu with two buttons under the same container?
Thanks!
It just needed a new :has() element on buttons, button:has(.dropdown). The fix was:
button:has(.dropdown) {
&:focus,
&:active {
.dropdown {
transform: translate(0, 20px);
opacity: 1;
visibility: visible;
}
}
}
Don't know why the id selector didn't work, but this way, it's working just fine.
I'm looking for a way to transition the Orange button in all four directions,
not just the right and bottom directions if anyone can assist me with
the code.
div {
position: relative;
left: 90px;
top: 24px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: Orange;
padding: 20px;
width: 170px;
height: 48px;
transition: width 1s, height 1s, transform 1s; /* I want it to transition to the top and left directions */
}
div:hover {
width: 255px;
height: 72px;
}
<div></div>
add transform and scale , then with transform-origin you can change direction when transition.
div {
position: relative;
left: 200px;
top: 100px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: Orange;
padding: 20px;
width: 170px;
height: 48px;
transition: transform 1s;
transform-origin: center;
}
div:hover {
transform-origin: center;
transform: scale(1.5,1.5);
}
<div></div>
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 1 year ago.
I have a background image shown with partial opacity for a <section> element (on the snippet it spreads on everything for some reason, on the browser it limits the image to the section..).
The issue is that the image also covers the inner HTML tags in the section.
I tried to use z-index: -1; on the CSS, but then the image does not show when hovering over the inner HTML tags.
How can it be achieved?
The code
.card {
background-image: linear-gradient(to bottom right, white, lightgray);
border-radius: 10px;
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
justify-content: center;
margin: 20px;
padding: 20px;
max-width: 80rem;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
#keyframes glow {
from {
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
}
to {
-webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-box-shadow: 3px 3px 30px 0px #3d6ded;
box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
transition: ease-in-out 0.6s;
}
.bg-image:hover {
opacity: 0.6;
}
<!DOCTYPE html>
<html lang="en">
<body>
<section class="card">
<div class="bg-image"></div>
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</section>
</body>
</html>
Your question is not very clear but from what I understand you want an image to show in the background of a box when the box is hovered.
First of all, you should remove the hover from the image and set it to it's parent like so:
.card:hover .bg-image {
opacity: 0.6;
}
Since, you had the hover on the image itself, z-index on the image was placing the image behind the other inner elements which caused the hover event not to be triggered since you weren't actually hovering on the image.
Put z-index back on the image along with the code I've provided above. It should hopefully solve your problem.
You need position: relative on the section too or else the image will break out of the section and mess the layout.
Your question is not clear, are you looking to do this ?
i just added a relative position to card, put tags into a div and add class
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}
to it.
.card {
background-image: linear-gradient(to bottom right, white, lightgray);
border-radius: 10px;
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
justify-content: center;
margin: 20px;
padding: 20px;
max-width: 80rem;
position: relative;
}
.card:hover {
animation: glow 1.2s infinite alternate;
}
#keyframes glow {
from {
-webkit-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
box-shadow: 4px 4px 40px 0px rgba(0, 0, 0, 1);
}
to {
-webkit-box-shadow: 3px 3px 30px 0px #3d6ded;
-moz-box-shadow: 3px 3px 30px 0px #3d6ded;
box-shadow: 3px 3px 30px 0px #3d6ded;
}
}
.bg-image {
background-image: url('https://cdn.pixabay.com/photo/2021/03/20/10/26/field-6109500_960_720.jpg');
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
border-radius: 10px;
opacity: 0;
transition: ease-in-out 0.6s;
z-index: 1;
}
.bg-image:hover {
opacity: 0.6;
}
.card-div {
position: relative;
z-index: 2;
}
.card-div:hover + .bg-image {
opacity: 0.6;
}
<!DOCTYPE html>
<html lang="en">
<body>
<section class="card">
<div class="card-div">
<h2>
H2 heading
</h2>
<p>
This is a <strong>paragraph</strong>. I like paragraphs. Paragraphs are very nice.
</p>
</div>
<div class="bg-image"></div>
</section>
</body>
</html>
I have the following fiddle:
https://jsfiddle.net/ur9bpgbn/164/
I try to apply a hover effect to the whole arrow with no success.
I have the CSS here:
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
.arrow:hover{
background-color: darkblue;
}
<div id="app">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
I found a way to apply hover:after but I don't want the hover effect to apply when the user mouses over the after, I want it the other way around. It should actually cover all the situations, if the user mouses over the main div, the after OR the before it should apply the hover state to all of these.
I tried reading up some documentaton on pseudo elements but I didn't found a working solution yet.
Is this doable?
.arrow:hover:after { } should fire when either the arrow is hovered or the after is hovered (as the after will be inside the arrow element)
$('.arrow').addClass('active')
body{
background: #000;
margin: 20%;
}
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
.arrow:hover:after{
border-left-color: red; /* turn arrow red on hover */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
You mean something like this?
.arrow:hover {
background: darkblue;
}
.arrow:hover:before {
border-right: 20px solid darkblue;
}
.arrow:hover:after {
border-left: 20px solid darkblue;
}
I'm trying to make a line that almost looks like it has serifs at the ends. Essentially, I want to make it wider at the very ends and thin in the middle, just using css. This has actually proven to be quite a challenge.
Any help would be appreciated.
Thus far I've been able to get the bottom to look how I want using the :after pseudo selector, but no luck with the top, which I can only seem to get concave, rather than convex.
Here's the code of what I've done so far
.line {
background:none;
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6);
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 10%;
top: 50%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6);
z-index: -1;
}
.line:before {
content: '';
position: absolute;
left: 0%;
width: 100%;
padding-bottom: 8%;
top: -30%;
border-radius: 35%;
box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1);
z-index: 24 !important;
}
and the HTML
<section class="stage">
<figure class="line"></figure>
</section>
Here's the fiddle of what I have thus far (also, I'm gonna need to rotate it for certain areas)
http://jsfiddle.net/speo9bfv/1/
Thanks for the help!
If you have a plain background color, you can do this with pseudo elements :
DEMO
HTML :
<section class="stage">
<figure class="line"></figure>
</section>
CSS :
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
background:rgba(0,0,0,0.6);
}
.line:after, .line:before {
content:'';
position: absolute;
left:0;
width:100%;
height:100%;
border-radius: 35%;
background:#fff;
}
.line:after{
top:5px;
}
.line:before{
bottom:5px;
}
I would try using gradients to create the illusion of a pinched line.
black -> white -> black
black line
black -> white -> black
I wanted this to just be a comment, but I couldn't make new lines like I wanted.
Here's a fiddle for you:
http://jsfiddle.net/qaqafc6f/
Here is a better one, with rotate applied.
http://jsfiddle.net/qaqafc6f/2/
Note this does not use :before or :after, and is probably more cross-browser compatible (as long as you add the vendor prefixes).
If you need a transparency around this shape you could use two pseudo elements with a curved border-radius and multiple box-shadows to colour in the space between them:
.line {
height: 8px;
position:relative;
overflow:hidden;
z-index:1;
top: 50px;
left: 50px;
width: 140px;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
.line:after, .line:before {
content:'';
position: absolute;
left:-10px;
right:-10px;
height:100%;
border-radius: 50%;
background:transparent;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .5), 5px 0 0px 2px rgba(0, 0, 0, .5), -5px 0 0px 2px rgba(0, 0, 0, .5), 10px 0 0px 2px rgba(0, 0, 0, .5), -10px 0 0px 2px rgba(0, 0, 0, .5), 15px 0 0px 2px rgba(0, 0, 0, .5), -15px 0 1px 2px rgba(0, 0, 0, .5), 20px 0 0px 2px rgba(0, 0, 0, .5), -20px 0 0px 2px rgba(0, 0, 0, .5), 25px 0 0px 2px rgba(0, 0, 0, .5), -25px 0 0px 2px rgba(0, 0, 0, .5), 30px 0 1px 1px rgba(0, 0, 0, .5), -30px 0 1px 1px rgba(0, 0, 0, .5);
}
Or - if an inline svg datauri is acceptable - you could do something like:
.svg-stick {
margin-top:200px;
display:block;
width:140px;
height:8px;
background: transparent url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iM...etc...) center center no-repeat;
background-size:100% 100%;
-webkit-transform: rotate(38deg);
transform: rotate(38deg);
}
Both demoed here: http://jsfiddle.net/eqaL4g5q/