When i make the screen size smaller then the button and select option is getting overlapped as per the snippet. Inbetween the button and the select option there should be a inch gap (This output is coming when the screen is in maximized). can someone please help in this, should i add anything else for the output. Posting the html and css code below:
css:
body {
margin: 0;
padding: 0;
background: #262626;
}
h3
{
text-align: right;
color: #C0C0C0;
padding-top: 10px;
}
.box {
position: absolute;
top:40%;
left: 60%;
transform: translate(-50%, -50%);
}
.box1 {
position: absolute;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
}
.box2 {
position: absolute;
top: 60%;
left: 60%;
transform: translate(-50%, -50%);
}
.box select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.box1 select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.box2 select {
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.ssystem
{
position: absolute;
top:40%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.sub
{
position: absolute;
top:50%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
.subsub
{
position: absolute;
top:60%;
left: 41%;
transform: translate(-50%, -50%);
background: #a9a9a9;
color: #fff;
padding: 10px;
width: 250px;
height: 35px;
border: none;
font-size: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,.5);
-webkit-appearance: border;
outline: none;
}
#button
{
background: #a9a9a9;
color: #fff;
position: absolute;
height:30px;
width:84px;
left:63%;
top:70%;
border: none;
color: arial;
font-size: 16px;
}
#button:hover
{
background: red;
cursor: pointer;
}
<body style="background-image: url(./img/bkgrnd.png);background-size: cover;">
<h3>welcome user!!</h3>
<button class="ssystem">System</button>
<button class="sub">Sub-System</button>
<button class="subsub">Sub-Sub-System</button>
<div class="box" id="sys">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<div class="box1" id="sub">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<div class="box2" id="sub1">
<select>
<option>AAA</option>
<option>BBB</option>
<option>CCC</option>
</select>
</div>
<input type="submit" value="Submit" id="button">
</body>
Rightnow no button is together with a select field and each element is positioned individually independent of each other sibling element. Sibling elements in this case are each button and the divs in which you find the select fields.
You can put the right button together with the right select field, this means you wrap them with a div and apply display: flex so they are positioned next to each other. For spacing you can add margin or padding.
Related
Recently I started creating a HUD for my server and I am stuck to the point I don't know what to do anymore, I am not that experienced with CSS but I've got some knowledge.
I am trying to make this kind of circle
View it on here
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
transform: rotate(25deg);
}
.wide {
width: 200px;
height: 200px;
}
<div class="circle wide"></div>
I attempted creating it with this code, it's close but not really.
Highlights
position: absolute; and transform: translate to move tags around
outline-offset is that orange line in the middle
the icons are Unicode characters
the panel is a <form> with 2 <button>s and a <meter>
It not great but you can't expect anything good without any SVG or images (too much work).
.circle {
position: relative;
border-radius: 50%;
width: 40px;
height: 40px;
box-sizing: border-box;
border-width: 22px;
border-style: solid;
border-color: #4a4a4c #4a4a4c00 #4a4a4c #4a4a4c;
outline: solid 6px orange;
outline-offset: -14px;
transform: rotate(0deg);
}
.wide {
width: 200px;
height: 200px;
}
.panel {
display: inline-block;
position: absolute;
top: -8px;
right: -8px;
width: 7rem;
padding: 0 6px 6px 6px;
border-radius: 12px;
transform: rotate(90deg) translateY(-240%);
transform-origin: left center;
background: #333;
}
.panel b {
display: inline-block;
transform: rotate(-90deg);
margin-right: 8px;
}
button {
width: 30%;
padding: 0;
border: 0.5px;
border-radius: 4px;
background: rgba(51,51,51,0.3);
cursor: pointer;
}
button:hover {
background: gold;
}
.power {
width: 70%;
transform: rotate(-180deg);
}
.view {
position: absolute;
top: 6px;
left: 18px;
font-family: 'Segoe UI';
font-size: 5.5rem;
color: #aaa;
}
<div class="circle wide">
<output class='view'>85</output>
<form class='panel'>
<label><b>⛽</b><meter class='power' value="6" min="0" max="10"></meter></label><br>
<button class='btn' type='button'>🔆</button>
<button class='btn' type='reset'>🔁</button>
<button class='btn' type='submit'>🛰️</button>
</form>
</div>
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>
I have a quite simple website. It scans for pictures via php and then displays them one at a time with two buttons on top. The bottons are used to switch back and forth between them.
On the very top of the page there are a couple of links, but I can not click them. When I double klick them, the picture gets highlighted instead of the text my cursor is above. I have tried it without js and php and the issue is still there.
I am not very experienced in HTML. I think it might be something about the z-index, but I cannot fix it.
body {
background-color: #FFFFFFf
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
I hope you can help me out here. I could manage to work out all the js and php things involved, but languages that don't follow programming rules... Not my best part.
The reason you have the box over the links is the floats aren't being cleared. That means the box that contains the links collapses, which is probably why you need to add so much padding. If you add clear: both to the container you will be able to click the links.
If you want to keep everything else the same I suggest adding a wrapper around the menu and setting position: relative, then you can give that a z-index greater than the container.
The menu buttons which are both position: absolute then need higher z-index too.
.menu {
position: relative;
z-index: 2;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
z-index: 1;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menu">
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.
Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.
Both of these have been fixed in the following:
body {
background-color: #ffffff;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #ffffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
float: left;
width: 100%;
margin-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
I have designed my web page,
HTML code,
<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
<form>
<div class="row center">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<br/>
<br/>
<button mat-button (click)="submit()">Login</button>
<br/>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
CSS code,
#import '~#angular/material/theming';
#include mat-core();
$yaana-app-primary: mat-palette($mat-orange, 800,400,200);
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 60%;
height: 20%;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
display: block;
margin: auto;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
transform: translateY(-60%);
transform: translateX(160%);
border-radius: 50%;
margin: auto;
position: relative;
}
And when I run the web page I am getting different views,
1) For Desktop Browser
2) For small screens such as IPhone 6
3) For Ipad Pro,
I wanted the user icon to appear at centre but it is getting deviated from centre based on screen sizes.
Using a flexbox for the row that contains the circle. Documentation in the source.
/* Added display flex for circle row */
div.row.center {
display: flex;
justify-content: center;
width: 100%;
}
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color: whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 60%;
height: 20%;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
display: block;
margin: auto;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
/* transform: translateY(-60%); removed */
/* transform: translateX(160%); removed */
border-radius: 50%;
/* margin: auto; removed */
/* position: relative; removed */
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
<form>
<div class="row center">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<br/>
<br/>
<button mat-button (click)="submit()">Login</button>
<br/>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
try this for your circle div
position: absolute;
left: 0;
right: 0;
margin: auto;
Super easy to fix.
You have transforms on your circle for some reason see code:
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
/* transform: translateY(-60%); */
/* transform: translateX(160%); */
border-radius: 50%;
margin: auto;
position: relative;
}
Remove these 2 lines commented out and then add the following css:
.center {
text-align: center;
}
This question already has answers here:
CSS box shadow around a custom shape?
(3 answers)
Closed 5 years ago.
Hi Guys i am trying to add a box shadow around the custom shape created using css
like the below image
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>
Declare values for the pseudo-element width & height
properties;
purge the borders;
then rotate the pseudo-element in question;
now apply box-shadow as required;
grab a nice cold one;
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 0px 5px 3px #000000;
}
div::after {
position: absolute;
z-index: 2;
content: "";
left: 100%;
width: 32px;
height: 32px;
background: #50b3cf;
transform: rotate(46deg);
transform-origin: 0 0;
box-shadow: 3px -3px 5px 0px #000000;
}
div::before { /* ver 2.0 Patch */
content: "";
position: absolute;
background: #50b3cf;
top: 0;
bottom: 0;
width: 25px;
right: 0;
z-index: 9;
}
<div></div>
.box{
border:1px solid white;
width:400px;
height:150px;
margin-left:40px;
box-shadow: 0 0 9px 3px rgba(0,0,0,0.5);
}
.arrow {
width: 100px;
height: 100px;
position: relative;
top:20px;
left:-100px;
overflow: hidden;
box-shadow: 0 10px 10px -17px rgba(0,0,0,0.5);
transform: rotate(270deg);
}
.arrow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: white;
transform: rotate(45deg);
top: 76px;
left: 25px;
box-shadow: -2px -2px 9px 0px rgba(0,0,0,0.5);
}
<div class="box">
<div class="arrow"></div>
</div>
Try this code
Maybe this what you are looking to do.
The first one with box shadow, the second one doesn't has box shadow but you can add it using this code box-shadow: 0px 0px 6px 0px #000;in class "arrow-r"
<style type="text/css">
.main-box{
position: relative;
padding: 0 35px 90px;
}
.box{
font-size: 20px;
position: relative;
display: inline-block;
clear: both;
margin-bottom: 8px;
padding: 13px 14px;
vertical-align: top;
border-radius: 5px;
}
.arrow-l {
float: left;
color: #fff;
background-color: #08abf4; box-shadow: 0px 0px 6px 0px #000;
}
.arrow-r {
float: right;
color: #1a1a1a;
background-color: #e2e2e2;
}
.box:before{
position: absolute;
top: 24px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.left:before {
left: -4px;
background-color: #08abf4;
}
.box:before{
position: absolute;
top: 21px;
width: 8px;
height: 6px;
content: '\00a0';
-webkit-transform: rotate(30deg) skew(-36deg);
transform: rotate(30deg) skew(-36deg);
}
.box.right:before {
right: -4px;
background-color: #e2e2e2;
}
</style>
<div class="main-box">
<div class="box arrow-l left">
I'm Liam Lababidi
</div>
<div class="box arrow-r right">
What about u?
</div>
</div>
You want to use box-shadow: 10px 10px 5px #888888; for this. Each px indicates what side and the # indicates the color.
body{
padding:50px
}
div{
height: 45px;
width: 209px;
float: left;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 16px;
background-color: #50b3cf;
box-shadow: 0px 10px 5px #888888;
}
div::after{
position: absolute;
z-index: 2;
content: "";
width: 0;
height: 0;
border-top: 22.5px solid transparent;
border-bottom: 22.5px solid transparent;
right: 1px;
transform: translateX(100%);
border-left: 22.5px solid #50b3cf;
}
<div></div>