0
260
ViewsImplement a circle on a line with shadow
I have a test project with react.I want implement a card with a half circle as follow:
I tried implement this but I could not. This is my implement picture:
I think mycircle shadow is wrong.
This is the html and CSS code:
.card__container{
padding:1.75rem;
margin-top:1.25rem;
margin-bottom:2.5rem;
margin-left:2.5rem;
margin-right:2.5rem;
position:relative;
overflow:hidden;
height:100vh;
box-shadow: 0 0 8px 0 rgba(0,0,0,.08);
}
.card__container:after{
content: '';
position: absolute;
display: block;
width: 30px;
top: 110px;
left: -10px;
height: 30px;
border: 1px solid crimson;
border-radius: 50%;
}<div className="card__container">
</div>I would appreciate very much, if any one can help.
·
Juan Pablo Isaza
1 answers
Answer question0
You can use inner shadow for :before and use :before elements left side to to hide outer box's shadow:
<html>
<head>
<style>
.card-container {
padding: 1.75rem;
margin-top: 1.25rem;
margin-bottom: 2.5rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
position: relative;
/*overflow: hidden;*/
height: 60vh;
width: 50vw;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.98);
}
.card-container:after {
content: "";
position: absolute;
display: block;
width: 30px;
top: 50px;
left: -15px;
height: 30px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
background-color:white;
box-shadow: inset -7px 0 8px -7px rgba(0, 0, 0, 0.98);
}
</style>
</head>
<body>
<div class="card-container">
</div>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question