CODEWITHSUNDEEP
htmlcsscss-shapes
reuseman
reuseman

Reputation: 333

Box with a triangle like a chat

I want to make with CSS a rectangular box followed by a little triangle, like this. And i've done it but i would like the same output with the ":after". I've tried but i can't print anything.

p {
        display:inline-block;
        padding:5px 6px 8px 6px;
        border-radius: 6px;
        float: right;
        margin-right: 40px;
        color:black;
        background-color:#146f79;
}

span {
            position:absolute;
            margin-top:-6px;
            margin-left:-5px;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 12px solid #146f79;
            transform:rotate(-45deg);
}
<p>
Hello!!!<span></span>
</p>

Upvotes: 10

Views: 14811

Answers (7)

thadeuszlay
thadeuszlay

Reputation: 3015

If you want to have a border around the shape and more adaptable, try this: https://jsfiddle.net/8qg9o3a6/7/

HTML

<div class="bubble-container">This is a bubble</div>

CSS

:root {
  --right: -40px;
  --sizearrow: 20px;
  --height: 120px;
  --top: calc(var(--height)/2 - var(--sizearrow));
  --bordercolor: #000;
}

.bubble-container {
    position: relative;
    border: 2px solid var(--bordercolor);
    margin: 0 auto;
    border-radius: 10px;
    height: var(--height);
    width: 465px;
}

.bubble-container::after {
  content: '';
    position: absolute;
    right: var(--right);
    top: calc(var(--top) + 1.5px);
    width: 0;
    height: 0;
    border: var(--sizearrow) solid transparent;
    border-left-color: #fff;
}

.bubble-container::before {
  content: '';
    position: absolute;
    right: calc(var(--right) - 5px);
    top: var(--top);
    width: 0;
    height: 0;
    border: 22px solid transparent;
    border-left-color: var(--bordercolor);
}

Upvotes: 0

nikoloza
nikoloza

Reputation: 966

Kadriles is right, but I already made simple example without any negative margin or box sizes

.bubble {
  position: absolute;
  background: slategray;
  color: white;
  padding: 6px 10px;
  border-radius: 5px 0 5px 5px;
}

.bubble:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 8px solid slategray;
  border-right: 12px solid transparent;
}
<div class="bubble">Hello</div>

Upvotes: 3

Shady Alset
Shady Alset

Reputation: 5714

I found an example with IOS Style and left / right (Sender / Receiver ) possibility maybe helps:

body {
  background-color: #eee;
  color: #222;
  font: 0.8125em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  padding: 40px 20px;
  margin: 0 auto;
  width: 400px;
}

.bubble {
  background-image: linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -o-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(210,244,254) 25%, rgb(149,194,253) 100%);
  background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.25, rgb(210,244,254)),
	color-stop(1, rgb(149,194,253))
  );
  border: solid 1px rgba(0, 0, 0, 0.5);
  /* vendor rules */
  border-radius: 20px;
  /* vendor rules */
  box-shadow: inset 0 5px 5px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  /* vendor rules */
  box-sizing: border-box;
  clear: both;
  float: left;
  margin-bottom: 20px;
  padding: 8px 30px;
  position: relative;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
  width: auto;
  max-width: 100%;
  word-wrap: break-word;
}

.bubble:before, .bubble:after {
  border-radius: 20px / 10px;
  content: '';
  display: block;
  position: absolute;
}

.bubble:before {
	border: 10px solid transparent;
	border-bottom-color: rgba(0, 0, 0, 0.5);
	bottom: 0;
	left: -7px;
	z-index: -2;
}

.bubble:after {
  border: 8px solid transparent;
  border-bottom-color: #d2f4fe;
  bottom: 1px;
  left: -5px;
}

.bubble--alt {
  background-image: linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -o-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(172,228,75) 25%, rgb(122,205,71) 100%);
  background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.25, rgb(172,228,75)),
	color-stop(1, rgb(122,205,71))
  );
  float: right;
}

.bubble--alt:before {
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px / 10px;
  left: auto;
  right: -7px;
}

.bubble--alt:after {
  border-bottom-color: #ace44b;
  border-radius: 20px / 10px;
  left: auto;
  right: -5px;
}
<div class="container">
	<div class="bubble">
		Box with a triangle like a chat
	</div>
	
	<div class="bubble bubble--alt">
		Stackoverflow.com
	</div>
	
	<div class="bubble">
		Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum, cu tale erat vivendo pri. Ne nec nibh dicant quaestio. At sit erant movet possim, no viderer forensibus duo.
	</div>
	
	<div class="bubble bubble--alt">
		Lorem ipsum dolor sit amet, magna facer et eam, vis ne laoreet voluptatum.
	</div>
	
</div>

Upvotes: 1

Jules Lamur
Jules Lamur

Reputation: 2368

#chatbubble {
   margin-left:25px;
   width:120px;
   height:40px;
   background-color:green;
   position:relative;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   line-height:40px;
   text-align:center;
}
#chatbubble:after {
   content:"";
   position:absolute;
   right:-13px;
   border-right:13px solid transparent;
   border-left:13px solid transparent;
   border-top:13px solid green;
}
<div id="chatbubble">Hello</div>

Upvotes: 2

Farhad
Farhad

Reputation: 4181

i think this site help you : https://css-tricks.com/examples/ShapesOfCSS/

#talkbubble { width: 120px; height: 80px; background: red; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }

#talkbubble:before { content:""; position: absolute; left: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-left: 26px solid red; border-bottom: 13px solid transparent; }
<div id="talkbubble"></div>

Upvotes: 5

42shadow42
42shadow42

Reputation: 405

When using :after content must be defined, since your element has no text content simply do this!

p:after {
    content: "";
    position:absolute;
    margin-top:-6px;
    margin-left:-5px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #146f79;
    transform:rotate(-45deg);
}

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

Here's the same output with :after property :

HTML

<p>
  Hello!!!
</p>

CSS

p {
  display:inline-block;
  padding:5px 6px 8px 6px;
  border-radius: 6px;
  float: right;
  margin-right: 40px;
  color:black;
  background-color:#146f79;
  position: relative;
}

p:after {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:-5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #146f79;
  transform:rotate(-45deg);
  right: -15px; 
  top: 10px;
}

Fiddle

Upvotes: 8

Related Questions