So I am trying to do conditional rendering and i've narrowed it down to the outside parent <div> tag being the culprit. So, I removed the conditional rendering and am trying to figure out why my card styling is being altered. Below I posted screenshots with and without parent div tag.
return (
<div>
<div className="card" id="chatcard">
<div className="card-body">
<h5 className="card-title">{this.props.user.user}</h5>
<div className="card-text">
<ChatList
user={this.props.user}
socket={this.props.socket}
currentUser={this.props.currentUser}
/>
</div>
</div>
<div className="card-footer">
<small className="text-muted">
<form>
<ChatField
user={this.props.user}
socket={this.props.socket}
chatusers={this.props.index}
/>
</form>
</small>
</div>
</div>
</div>
);
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
#chatcard {
width: 40rem;
}
I adjusted the width within this and it worked. It's odd that adding the div tag caused this.
Related
At the moment my css looks like this:
But I want the inverse of the green border-radius blocks, I want this:
Any idea how to achieve this with the least amount of extra divs and stuff? Here is my code so far:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
One possible solution would be using box-shadow for the before and after.
Also you may consider using pointer-events:none for the pseudo-elements since you don't want to block the other elements on the nav.
Another solution would be using svg for your buttons.
.navbar {
background-color: blue;
height: 35px;
overflow:hidden;
}
button {
color: white;
border: none;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
box-shadow: 2px 10px 1px white;
pointer-events:none;
}
button:after{box-shadow: -2px 10px 1px white;}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
I think you should add a dic contain content text, like this:
.navbar {
background-color: blue;
height: 35px;
}
.content {
color: white;
border: none;
background-color: blue;
height: 100%;
padding: 10px 10px;
cursor: pointer;
}
button{
background-color: white;
padding: 0px;
border: 0px;
margin-left: -4px;
}
button.selected{
background-color: blue;
}
button.selected .content{
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
vertical-align: bottom;
}
button.before-selected .content{
border-bottom-right-radius: 10px;
}
button.after-selected .content{
border-bottom-left-radius: 10px;
}
<div class="navbar">
<button><div class="content">tab1</div></button>
<button class="before-selected"><div class="content">tab2</div></button>
<button class="selected"><div class="content">tab3</div></button>
<button class="after-selected"><div class="content">tab4</div></button>
</div>
I'd suggest using svg with background-image or using the clip-path property on ::before and ::after.
You have to use SVGs on ::before and ::after of the tab element. Here's an example:
header {
background: gray;
}
nav {
padding-top: 10px;
}
.tab {
background: none;
border: none;
padding: 10px;
width: 100px;
}
.tab.selected {
background: white;
border-radius: 10px 10px 0 0;
position: relative;
}
.tab.selected::before,
.tab.selected::after {
content: '';
bottom: 0;
height: 10px;
position: absolute;
width: 10px;
}
.tab.selected::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
left: -10px;
}
.tab.selected::after {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><path d='M 0 10 L 10 10 L 10 0 Q 10 10 0 10 Z' fill='%23ffffff'></path></svg>");
right: -10px;
transform: scaleX(-1);
}
<header>
<nav>
<button class="tab">Tab</button>
<button class="tab selected">Tab</button>
<button class="tab">Tab</button>
</nav>
</header>
Codepen link.
You can use the following property to get the inverted image of the green border radius blocks:
transform: rotate(180deg);
So your CSS will be like:
button:after,
button:before {
background-color: rgb(188, 218, 188);
height: 20px;
width: 20px;
position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
Or you can use the following and style it better:
.navbar {
background-color: blue;
height: 35px;
}
button {
color: white;
border: none;
// background-color: green;
background-color: transparent;
height: 100%;
padding: 0px 10px;
cursor: pointer;
}
button.selected {
background-color: white;
color: black;
cursor: default;
border-radius: 15px 15px 0px 0px;
position: relative;
height: 30px;
vertical-align: bottom;
}
button:after,
button:before {
background-color: transparent;
height: 20px;
width: 20px;position: absolute;
content: '';
bottom: 0px;
transform: rotate(180deg);
}
button:after {
right: -20px;
border-bottom-left-radius: 15px;
-webkit-box-shadow: inset 0px 6px 5px 0px #000000;
box-shadow: inset 0px 6px 5px 0px #000000;
}
button:before {
left: -20px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: inset 4px 8px 5px -3px #000000;
box-shadow: inset 4px 8px 5px -3px #000000;
}
<div class="navbar">
<button>tab1</button>
<button>tab2</button>
<button class="selected">tab3</button>
<button>tab4</button>
</div>
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 am trying to place a button next to an inline-block div with a fixed width. But it goes right under the div. I have tried reducing the width of the container this doesn't work. I'd like to accomplish this without the button of class add being in a separate container. The button should be beside the .input-wrap div
Here's the code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: rgb(149, 152, 154);
}
.input-block {
margin-bottom: 40px;
}
.input-block>* {
margin-bottom: 20px;
}
.description {
display: block;
font-size: 20px;
}
.radio-container {
display: inline;
margin-right: 30px;
}
.radio-container>input {
margin-right: 10px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -99999px;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: rgb(149, 152, 154);
}
[type="radio"]:checked+label::before,
[type="radio"]:not(:checked)+label::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid rgb(149, 152, 154);
border-radius: 100%;
background: transparent;
}
[type="radio"]:checked+label::after,
[type="radio"]:not(:checked)+label::after {
content: "";
width: 10.6px;
height: 10px;
position: absolute;
top: 5px;
left: 4.5px;
border-radius: 100%;
transition: all 0.2s ease;
background: rgb(149, 152, 154);
}
[type="radio"]:not(:checked)+label::after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked+label::after {
opacity: 1;
transform: scale(1);
}
.round-process {
width: 100%;
height: 40px;
border-radius: 15px;
border: 1px solid rgb(149, 152, 154);
text-align: left;
color: darkgray;
font-size: 20px;
outline: none;
padding-left: 15px;
text-transform: capitalize;
background: none;
}
input[type="number"] {}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-wrap {
position: relative;
width: 200px;
/* text-align: center;*/
display: inline-block;
}
div.vertical-line {
width: 1px;
height: 40px;
position: absolute;
top: 0px;
left: 150px;
background-color: rgb(149, 152, 154);
}
.text-container {
/* width: 200px;*/
}
.mb {
font-weight: 800;
color: rgb(149, 152, 154);
position: relative;
top: 11.5px;
left: 10px;
}
.add {
border-radius: 50%;
border: none;
width: 20px;
height: 20px;
text-align: center;
color: black;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
background-color: white;
}
.add:active {
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.239216) 0px 0px 0px;
}
.add:focus {
outline: 0px;
}
<html>
<body>
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="text-container">
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" />
<span class="mb">MB</span>
</div>
<button class="add">×</button>
</div>
</div>
</div>
</body>
</html>
You have missing closing tags in your html. When you close those tags the button will align on the right-bottom corner of your div. It worked for me when I closed the divs like this,
<body>
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="text-container">
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" ></div>
<span class="mb">MB</span>
</div>
<button class="add">×</button>
</div>
</div>
</div>
</body>
Hope this helps.
Okay i was able to solve this by removing .text-container . Then i moved the input-wrap width property to .round-process
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
color: rgb(149, 152, 154);
}
.input-block {
margin-bottom: 40px;
}
.input-block > * {
margin-bottom: 20px;
}
.description {
display: block;
font-size: 20px;
}
.radio-container {
display: inline;
margin-right: 30px;
}
.radio-container > input {
margin-right: 10px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -99999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: rgb(149, 152, 154);
}
[type="radio"]:checked + label::before,
[type="radio"]:not(:checked) + label::before {
content: "";
position: absolute;
left: 0px;
top: 0px;
width: 18px;
height: 18px;
border: 1px solid rgb(149, 152, 154);
border-radius: 100%;
background: transparent;
}
[type="radio"]:checked + label::after,
[type="radio"]:not(:checked) + label::after {
content: "";
width: 10.6px;
height: 10px;
position: absolute;
top: 5px;
left: 4.5px;
border-radius: 100%;
transition: all 0.2s ease;
background: rgb(149, 152, 154);
}
[type="radio"]:not(:checked) + label::after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked + label::after {
opacity: 1;
transform: scale(1);
}
.round-process {
width: 200px;
height: 40px;
border-radius: 15px;
border: 1px solid rgb(149, 152, 154);
text-align: left;
color: darkgray;
font-size: 20px;
outline: none;
padding-left: 15px;
text-transform: capitalize;
background: none;
}
input[type="number"] {}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.input-wrap {
position: relative;
/* width: 200px;*/
/* text-align: center;*/
display: inline-block;
}
.vertical-line {
width: 1px;
height: 40px;
position: absolute;
top: 0px;
left: 150px;
background-color: rgb(149, 152, 154);
}
.mb {
font-weight: 800;
color: rgb(149, 152, 154);
position: relative;
top: 11.5px;
left: 10px;
}
.add {
border-radius: 50%;
border: none;
width: 30px;
height: 30px;
text-align: center;
color: #57C48E;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 5px 30px, rgba(0, 0, 0, 0.2) 0px 1px 10px;
background-color: white;
vertical-align: top;
margin-top: 5px;
margin-left: 20px;
}
<div class="main">
<div class="input-block">
<div class="description">Total Memory</div>
<div class="input-wrap">
<input class="round-process" maxlength="5" type="number">
<div class="vertical-line" />
<span class="mb">MB</span>
</div>
<button class="add">✚</button>
<button class="add disabled">✚</button>
</div>
</div>
I'm currently creating dropdown menu that will toggle to the right of sidebar. I want to remove the blue color around the dropdown menu. I'm using Foundation 5 to create the dropdown menu.
Here is the screenshot of dropdown that I've made
Below are CSS and HTML code that I used
.f-dropdown1 {
display: none;
left: -9999px;
list-style: none;
margin-left: 0;
position: absolute;
background: #FFFFFF;
border: solid 1px #cccccc;
font-size: 0.875rem;
height: auto;
max-height: none;
width: 100%;
z-index: 89;
margin-top: 2px;
max-width: 200px;
}
.f-dropdown1.open {
display: block;
}
.f-dropdown1>*:first-child {
margin-top: 0;
}
.f-dropdown1>*:last-child {
margin-bottom: 0;
}
.f-dropdown1:before {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent #FFFFFF transparent;
border-bottom-style: solid;
position: absolute;
top: -12px;
left: 10px;
z-index: 89;
}
.f-dropdown1:after {
border: inset 7px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent transparent #cccccc transparent;
border-bottom-style: solid;
position: absolute;
top: -14px;
left: 9px;
z-index: 88;
}
.f-dropdown1.right:before {
left: auto;
right: 10px;
}
.f-dropdown1.right:after {
left: auto;
right: 9px;
}
.f-dropdown1.drop-right {
display: none;
left: -9999px;
list-style: none;
margin-left: 0;
/* position: absolute;
*/
background: #FFFFFF;
border: solid 1px #cccccc;
font-size: 0.875rem;
height: auto;
max-height: none;
width: 100%;
z-index: 89;
margin-top: 0;
margin-left: 65px;
max-width: 200px;
}
.f-dropdown1.drop-right.open {
display: block;
}
.f-dropdown1.drop-right>*:first-child {
margin-top: 0;
}
.f-dropdown1.drop-right>*:last-child {
margin-bottom: 0;
}
.f-dropdown1.drop-right:before {
border: inset 6px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent #FFFFFF transparent transparent;
border-right-style: solid;
position: absolute;
top: 10px;
left: -12px;
z-index: 89;
}
.f-dropdown1.drop-right:after {
border: inset 7px;
content: "";
display: block;
height: 0;
width: 0;
border-color: transparent #cccccc transparent transparent;
border-right-style: solid;
position: absolute;
top: 9px;
left: -14px;
z-index: 88;
}
.f-dropdown1 ul:active {
border: 1px solid red !important;
}
.f-dropdown1 li {
cursor: pointer;
font-size: 0.875rem;
line-height: 1.125rem;
margin: 0;
}
.f-dropdown1 li:hover, .f-dropdown li:focus {
background: #EEEEEE;
border: none;
}
.f-dropdown1 li a {
display: block;
padding: 0.5rem;
color: #555555;
}
.f-dropdown1.content {
display: none;
left: -9999px;
list-style: none;
margin-left: 0;
position: absolute;
background: #FFFFFF;
border: solid 1px #cccccc;
font-size: 0.875rem;
height: auto;
max-height: none;
padding: 1.25rem;
width: 100%;
z-index: 89;
max-width: 200px;
}
.f-dropdown1.content.open {
display: block;
}
.f-dropdown1.content>*:first-child {
margin-top: 0;
}
.f-dropdown1.content>*:last-child {
margin-bottom: 0;
}
.f-dropdown1.radius {
border-radius: 3px;
}
.f-dropdown1.tiny {
max-width: 200px;
}
.f-dropdown1.small {
max-width: 300px;
}
.f-dropdown1.medium {
max-width: 500px;
}
.f-dropdown1.large {
max-width: 800px;
}
.f-dropdown1.mega {
width: 100% !important;
max-width: 100% !important;
}
.f-dropdown1.mega.open {
left: 0 !important;
}
.dropdown.button, button.dropdown {
position: relative;
padding-right: 3.5625rem;
}
.dropdown.button::after, button.dropdown::after {
border-color: #FFFFFF transparent transparent transparent;
border-style: solid;
content: "";
display: block;
height: 0;
position: absolute;
top: 50%;
width: 0;
}
.dropdown.button::after, button.dropdown::after {
border-width: 0.375rem;
right: 1.40625rem;
margin-top: -0.15625rem;
}
.dropdown.button::after, button.dropdown::after {
border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.tiny, button.dropdown.tiny {
padding-right: 2.625rem;
}
.dropdown.button.tiny:after, button.dropdown.tiny:after {
border-width: 0.375rem;
right: 1.125rem;
margin-top: -0.125rem;
}
.dropdown.button.tiny::after, button.dropdown.tiny::after {
border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.small, button.dropdown.small {
padding-right: 3.0625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
border-width: 0.4375rem;
right: 1.3125rem;
margin-top: -0.15625rem;
}
.dropdown.button.small::after, button.dropdown.small::after {
border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.large, button.dropdown.large {
padding-right: 3.625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
border-width: 0.3125rem;
right: 1.71875rem;
margin-top: -0.15625rem;
}
.dropdown.button.large::after, button.dropdown.large::after {
border-color: #FFFFFF transparent transparent transparent;
}
.dropdown.button.secondary:after, button.dropdown.secondary:after {
border-color: #333333 transparent transparent transparent;
}
<a data-options="align:right" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" href="#" class="left"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
<ul id="drop1" class="f-dropdown1" data-dropdown-content aria-hidden="true" tabindex="-1">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
Either customise the scss defaults Foundation provides or override them with your own css file.
More in their documentation here.
If you aren't running SASS then you'll need your overrides stylesheet to come AFTER the Foundation one so you don't need to do silly things like use !important.
In the example in the documentation their trigger is a button with the "button" class so you need to override that class to get the look you want:
<a class="button" data-dropdown="tinyDrop" aria-controls="tinyDrop" aria-expanded="false">Link Dropdown »</a>
Personally I'd add something like this to override rather than changing the default .button style:
.button.my-dropdown-style {...}
.f-dropdown1 {
outline: none;
}
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;
}