I am trying to create a speech bubble with an arrow on the left and right side. Something like below
I have used the below CSS to achieve the same :
.speech-wrapper{
padding: 30px 40px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #c7edfc;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.chatbox_other{
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #D3D3D3;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.name_other{
font-weight: 600;
position: absolute;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
bottom: 8px;
right: 10px;
}
.timestamp_other{
font-size: 11px;
position: absolute;
text-align: left;
bottom: 0px;
left: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 8px;
right: 10px;
text-transform: uppercase; color: #999
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
}
.bubble-arrow {
position: absolute;
width: 0;
bottom:42px;
left: -16px;
height: 0;
&.alt{
right: -2px;
bottom: 40px;
left: auto;
}
}
.bubble-arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #c7edfc;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
But for me, the arrow is missing always it always comes with a box.
I am a beginner to HTML and CSS any help on this will be appreciated.
Am I doing anything wrong to draw the rectangle?
EDIT:
I can see the chat bubble on chrome and all recent browsers but when I try using the very old browsers the below statement does not decode correctly. So the chat triangle was not in the appropriate position.
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
HTML CODE:
<div class="speech-wrapper"><div class="chatbox"><div class="txt"><p class="name">TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div><div class="bubble-arrow alt"></div></div>
Is there anything else can I use apart from the transform
Try this,
<!doctype html>
<html>
<head>
<title>Chat Bubbles Demo</title>
<style type="text/css">
.chat-box
{
width: 300px;
}
.header
{
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages
{
padding: 10px;
height: 200px;
background-color: green;
background-color: rgb(237, 239, 244);
border-width: 1px;
border-color: black;
border-style: solid;
overflow-y: scroll;
}
.messages ul
{
padding: 0px;
list-style-type: none;
}
.messages ul li
{
height: auto;
margin-bottom: 10px;
clear: both;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.left
{
float: left;
}
.messages ul li span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
.input-box
{
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea
{
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="header">
Narayan Prusty
</div>
<div id="messages" class="messages">
<ul>
<li>
<span class="left">Hello</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Are you there?</span>
<div class="clear"></div>
</li>
<li>
<span class="right">Yes I am here</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Thanks for accepting my friend request</span>
<div class="clear"></div>
</li>
<li>
<span class="right">You Welcome</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Bye</span>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="input-box">
<textarea placeholder="Enter message"></textarea>
</div>
</div>
</body>
</html>
Related
We developing chat application. in that input and out text message is coming.but input and out put is coming side by side but i need one by one.like if input is single later then that line total block then out put will come short or long text it should be come text line only but i am not able to getting that and message box corners are coming different any one please help me
This is we are facing please find screen shot
we need like this and corners are not coming same i need input user message how it is coming we need customer message box corner like that
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: right;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
right: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
}
.userTextDivOp::before {
left: -18px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 14px solid transparent;
border-top: 6px solid #999;
}
.userTextDivOp::after {
left: -6px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: 0px;
border: 9px solid transparent;
border-top: 4px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
you just need to wrap the message divs in a new div with a width:98%.
so that new message comes after the first one.
Thanks
.message-block{
width:98%;
height:auto;
overflow:hidden;
position:relative;
padding:0px 10px;
}
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
border-top:2px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: right;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -2px;
right: -10px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0.01em;
right: -6px;
border: 9px solid transparent;
border-top: 10px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
}
.userTextDivOp::before {
left: -14px !important;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -3px;
border: 11px solid transparent;
border-top: 10px solid #999;
}
.userTextDivOp::after {
left: -9px;
right: 0px !important;
content: '';
position: absolute;
visibility: visible;
top: -0.09em;
border: 10px solid transparent;
border-top: 9px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="message-block">
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
</div>
<div class="message-block">
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
</div>
<div class="message-block">
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
</div>
<div class="message-block">
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
</div>
A simple solution for you is to set clear: both; instead of clear: right; in the CSS rules of .userTextDiv and of .userTextDivOp.
To solve the corner problem, just c/p the CSS of .userTextDiv:before and after to replace the CSS of .userTextDivOp:before and after and replace right rules by left.
Hope it helps.
.userTextDiv {
position: relative;
background: white;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
float: right;
margin-bottom: 7px;
font-size: 12px;
text-align: right;
padding-top: 5px;
margin-right: 4px;
margin-left: 4px;
clear: both;
}
.userTextDiv::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
right: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDiv::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
right: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDiv img {
display: block;
height: auto;
max-width: 100%;
}
.userTextDiv .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
.userTextDiv .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp {
text-align: left;
float: left;
clear: left;
position: relative;
background: white;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 7px;
border-radius: 6px;
border: 3px solid #999;
font-size: 12px;
margin-bottom: 7px;
margin-right: 4px;
margin-left: 11px;
clear: both;
}
.userTextDivOp::before {
content: '';
position: absolute;
visibility: visible;
top: -3px;
left: -11px;
border: 9px solid transparent;
border-top: 11px solid #999;
}
.userTextDivOp::after {
content: '';
position: absolute;
visibility: visible;
top: 0px;
left: -6px;
border: 9px solid transparent;
border-top: 8px solid white;
clear: both;
}
.userTextDivOp .message {
word-break: break-all;
font-size: 12px;
}
.userTextDivOp .username {
position: relative;
display: block;
font-weight: bold;
font-size: 12px;
color: #8e0035;
}
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDiv">
<div class="username">user</div>
<span class="message">click on oky button</span>
</div>
<div class="userTextDivOp">
<div class="username">customer</div>
<span class="message">helphelphelphelphelphelphelphehelphelphelphelphelphelplphelphelphelphelphelphelphelphelphelphelphelphelp</span>
</div>
I want to make a tool tip for drop down but am having problem in the arrow please can some one position it the way i want it thank you
Here is what i get
I want it to look like this
Here is my CSS code
<style>
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 18px solid #D03B3E;
position: absolute;
top: -18px;
left: 50%;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
</style>
HTML
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>
just change the arrow border like this:
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E; /* changed from top to bottom */
position: absolute;
top: -18px;
right: 25px; /* change the horizontal position */
margin-left: -4px;
display: block;
}
Here is a snippet:
#wrapper-err {
position: absolute;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
z-index: 2222;
width:210px;
height:90px;
margin-top:2em;
margin-left:2em;
}
.err-tip {
background-color: #D03B3E;
color:#fff;
padding:0.5em;
}
.err-tip::before {
content: "";
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 18px solid #D03B3E;
position: absolute;
top: -18px;
right: 25px;
margin-left: -4px;
display: block;
}
.err-tip div{
margin: 0px;
border: 0px none;
font: inherit;
vertical-align: baseline;
outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}
<div class="err-tip" id="wrapper-err">
<span class="err-close">X</span>
<p>the text.</p>
</div>
I've got an issue with my chat window, every long message overflows onto the x, and I'm trying to force it to over flow onto the height / y axis, I've tried adding overflow-x:none; and height:auto;, but doesnt seem to work.
This is what it looks like:http://www.socialnetwk.com/chatbug.png
Here is my code:
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height:auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content:"";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content:"";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content:"";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content:"";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display:none;
visibility:hidden;
}
</style>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
</div>
Add this CSS property
.messages ul li span {
word-wrap: break-word;
}
<style>
.chat-box {
position: relative;
overflow-x: none;
}
.header {
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages {
height: 80%;
overflow-x: none;
background-color: green;
background-color: rgb(237, 239, 244);
overflow-y: scroll;
}
.messages ul {
padding: 0px;
list-style-type: none;
overflow-x: none;
}
.messages ul li {
height: auto;
margin-bottom: 10px;
clear: both;
overflow-x: none;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span {
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
height: auto;
overflow-x: none;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
word-wrap: break-word;
}
.messages ul li span.received {
float: left;
}
.messages ul li span.received:after {
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.received:before {
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.sent:after {
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.sent:before {
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.sent {
float: right;
background-color: #dbedfe;
}
.clear {
clear: both;
}
.input-box {
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea {
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
.MsgInputHidden {
display: none;
visibility: hidden;
}
</style>
<body>
<div class="chat-box">
<div id="messages" class="messages message-window" friend_id="<?=$FriendName->id ?>">
<ul class="message">
<li>
<span class="sender">LongTextGoesInThisBoxLongTextGoesInThisBoxLongTextGoesInThisBox</span>
<li>
</ul>
</div>
I wanted to ask what is the best way to create such button with css:
I was trying to create such button with divs using float left and right, but when i zoom in and out right side of the button drops down. Is there a better way to achieve this?
fiddle link
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
<div>text</div>
</div>
<div><div></div></div>
</div>
</div>
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 15px;
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
All it takes:
button.styled{
color:#fff;
background:#00B48C; /* CHANGE ONLY THIS ONE AND SEE IT HAPPEN ;) */
padding:10px 45px 10px 15px;
border-radius:4px;
/* Do not edit below */
border:0;
position:relative;
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
button.styled:after{
background: rgba(0,0,0,0.2);
padding:11px;
content:'\25be'; /* \25bc \25be */
/* Do not edit below */
position:absolute;
right:0;
top:0;
}
<button class="styled">Hello World</button>
For more UTF-8 characters see: https://stackoverflow.com/a/25986009/383904
you can use only one element with pseudo elements :before and :after
button {
border-radius: 4px 0px 0px 4px;
border-width: 1px;
border-color: #008f70;
border-style: solid;
background-color: #00b48c;
text-align: right;
padding: 15px;
width: 165px;
position: relative;
color: white;
}
button:before {
content: '\25BE';
position: absolute;
right: -32px;
z-index: 1;
font-size: 16px;
top: 50%;
color: white;
transform: translatey(-50%);
}
button:after {
content: '';
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin-right: 9px;
background-color: #008f70;
width: 54px;
position: absolute;
top: -1px;
left: 100%;
bottom: -1px
}
button:focus {
outline: 0;
box-shadow: none;
}
<button>test</button>
Get rid of the duplicate div with text and add top and bottom padding to the other div with text.
You can use Font Awesome to get the caret sign in the dropdown.
.button {
height: 80px;
cursor: pointer;
}
.button:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.button > div:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #008f70;
background-color: #00b48c;
text-align: right;
float: left;
padding: 22px 15px 26px 15px; /* add top and bottom border */
width: 165px;
}
.button > div:first-child > div:first-child {
color: #b8e3d6;
font-size: 12pt;
}
.button > div:first-child > div:last-child {
color: #fff;
font-weight: bold;
font-size: 20pt;
}
.button > div:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
float: right;
margin-right: 9px;
background-color: #008f70;
width: 64px;
height: 81px;
position: relative;
}
i{
margin-left: 45%;
margin-top: 45%;
color: white;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div style="width:270px">
<div class="button">
<div>
<div>text</div>
</div>
<div><div><i class="fa fa-caret-down"></i></div></div> <!-- add the caret -->
</div>
</div>
Updated jsFiddle
Source
How this one can achieved in CSS. I googled out but i didn't find any solution.
Try this:
HTML
<nav class="nav">
<ul>
<li>1. Account Info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ul>
</nav>
StyleSheet
.nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
width: 100%;
}
.nav ul li {
float: left;
margin: 0 .2em 0 1em;
}
.nav ul a {
background: red;
padding: .3em 1em;
float: left;
text-decoration: none;
color: #fff;
position: relative;
}
.nav ul li:first-child a:before {
content: normal;
}
.nav ul li:last-child a:after {
content: normal;
}
.nav ul a:before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: red rgba(0, 0, 0, 0);
left: -1em;
margin-left: 1px;
}
.nav ul a:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid rgba(0, 0, 0, 0);
border-bottom: 1.5em solid rgba(0, 0, 0, 0);
border-left: 1em solid red;
right: -1em;
margin-right: 1px;
}
Here is the Demo
Try:
HTML:
<div class="arrow">
<p>1. Acount Info</p>
</div>
<div class="arrow2">
<p>2. Verification</p>
</div>
<div class="arrow3">
<p>3. Enjoy</p>
</div>
CSS:
.arrow {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display:inline-block;
}
.arrow:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow2:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
.arrow3 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow3:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
p {
color:white;
text-align: center;
margin-top: 6px;
}
And the DEMO
Here's my attempt: http://codepen.io/anon/pen/xDeCd/
This example works well even if the user changes his font-size or triggers a page zoom. List-items should not break in several lines if the browser is resized.
Screenshot
Markup
<ol>
<li>1. Account info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ol>
(add links if/where necessary, I've just supposed they are not links but simply information labels about the required steps during a process).
Relevant CSS
ol {
white-space: nowrap;
}
li:after, li:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
width: 1em;
height: 100%;
}
li {
display: inline-block;
position: relative;
height: 3em;
padding: 0 1em;
margin-right: 3em;
background: #d12420;
color: #f0f0f0;
font: 1em/3em Arial;
}
li + li { margin-left: -1.8em; }
li:not(:last-child):after {
left: 100%;
content: "";
border-left: 1em solid #d12420;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
li + li:before {
content: "";
right: 100%;
border-left: 1em solid #transparent;
border-top: 1.5em solid #d12420;
border-bottom: 1.5em solid #d12420;
}
li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }
Here is some code, it may be useful for youDEMO
<div class="breadcrumb flat">
<a class="active" href="#">1.Account Verification</a>
2.Verification
3.Enjoy
</div>