What is the best way to position a triangle within my div so that it resembles a speech bubble?

I designed a basic div structure to house my comments section.

To add a creative touch, I'd like to style it like a speech bubble with a triangle on the left side or any other visual effect that gives the illusion of a speech bubble emerging from the left.

Is there a way I can achieve this without resorting to the use of an image?

illustration

https://i.sstatic.net/XSIz3.png

code snippet in HTML

<div class='comment'></div>

code snippet in CSS

.comment {
    margin-left: 10px;
    height: 80px;
    display: inline-block;
    color: white;
    width: 400px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
}
htmlcss

Answer №1

Give this a shot

.reply {
    margin-left: 10px;
    height: 80px;
    display: inline-block;
    color: white;
    width: 400px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    background-color: #fff;
    border:1px solid #000;
}
.reply::before{
  content:"";
  position: absolute;
  top:20px;
  left:-12px;
  margin:auto;
  height: 20px;
  width: 20px;
  border:1px solid #fff;
  transform:rotate(45deg);
  background-color: #fff;
  border-bottom:1px solid #000;
  border-left:1px solid #000;
}
<div class='reply'></div>

customize as needed,

expecting this to be useful...

Answer №2

My intention is to provide assistance:

.feedback {
  position: relative;
  margin-left: 50px;
  margin-top: 50px;
  height: 50px;
  display: inline-block;
  width: 200px;
  padding: 10px;
  border-radius: 5px;
  background: skyblue;
  color: #FFF;
}

.feedback:before, .feedback:after  {
  content: '';
  border-radius: 100%;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: -1;
}

.feedback:after {
  background-color: #fff;
  bottom: -30px;
  left: 55px;
}

.feedback:before {
  background-color: skyblue;
  bottom: -20px;
  left: 70px;
}
<div class='feedback'>Hello,World!</div>

Answer №3

Nicholas Gallagher's work is truly impressive, and you can check out his demo page to see for yourself.

I must acknowledge that this code snippet is taken directly from his website and not my own creation.

<style>
/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background:linear-gradient(#f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}
</style>

<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error

I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...

htmlnode.jsexpress

Modify the class of rows in table 2 once a particular value of a radio button in table 1 has been selected

One issue I am facing is related to two tables with radio buttons. Each table highlights the corresponding row when a radio button is checked, working independently. However, I need a specific value from table 1 to un-highlight any previously checked rows ...

jqueryhtmlcss

allowing users to scale content and adjust layouts based on device characteristics

When I inherited the maintenance of a website, I discovered that it was not optimized for mobile devices. The client requested that the site be made accessible on mobile devices, so I attempted to ensure that the mobile version mirrored the desktop version ...

cssresponsive-designmedia-queriesviewport

Identifying the pointermove event occurring outside the div when the pointer is held down

Recently, I put my skills to the test with an interesting challenge. My main objective was to replace all HTML tags with div elements. Objective: Develop a color picker similar to the one found in Photoshop Requirements: Utilize HTML5, JavaScript, and CS ...

javascripthtmlcsspointer-events

Strange behavior in Chrome when using Bootstrap Gradient

Chrome started behaving oddly with the Bootstrap class .bs-gradient, randomly changing the gradient to color breaks of black, lightblue, darkblue, and more: https://i.sstatic.net/BGabA.png This is the code for one of those boxes: <link rel="style ...

htmlcssgoogle-chromegradientbootstrap-5

Addressing rendering problems in Ag-GRID when used with Angular

I'm facing a perplexing issue where the ag-grid table in my Angular 12 / Bootstrap 5 application renders with a height of 0px. Below is the link to the rendered table: rendered table Upon inspecting with Chrome's debug tool, I noticed that the ...

htmlcssangularbootstrap-5ag-grid

Execute the executable file on the server and display the output on the client side

Is it feasible to execute an executable file on the web server and display the image on the client side using various technologies like PHP, JS, or HTML? I am interested in achieving this to avoid sharing the exe file directly with the client but still al ...

phphtmlwebserverexe

Adjusting the position of a nested element as the width of its parent container

It's a bit tricky to explain, but essentially I have two divs and when I click the button, instead of moving the elements, I want to change the width of their parent containers to prevent any overlapping. Interestingly, the one on the right edge of t ...

javascripthtmlcss

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

csssasscompass-sassadobe-brackets

div table with varying cell styles on each row

Is it feasible to achieve a table layout resembling the one depicted below using only div tags and CSS? _________________________________________________ | | | | | | | | ...

htmlcss

Learn how to incorporate a newly created page URL into a customized version of django-oscar

Just starting out with django-oscar and trying to set up a new view on the page. I've successfully created two pages using django-oscar dashboard, https://ibb.co/cM9r0v and added new buttons in the templates: Lib/site-packages/oscar/templates/osca ...

pythonhtmldjangopython-3.xdjango-oscar

Utilizing AngularJS for fetching data via http.get and binding it to ng

I am currently in the process of developing a weather web application with angularJS. To achieve this, I am utilizing a weather API and aiming to incorporate an input box which will allow users to enter a city name and load the corresponding weather inform ...

javascripthtmlangularjs

DOM API: utilizing the getBoundingClientRect method alongside the CSS style property "float:left"

When using the DOM-API method Element.getBoundingClientRect, it may not always return the actual bounds where content is rendered. This can be seen in the following examples: <html> <head> <style> #float { float: left; } & ...

htmlcssselenium-webdriverdom

Creating a Turn.js interactive book similar to the provided example?

I'm in the process of creating a book using turn.js with Jquery and everything is going smoothly so far. However, I could use some assistance. I am trying to achieve the look of a hard-backed journal-type book similar to the example provided here . My ...

javascriptjquerycsshtml

Editable JSON data within a table using Twitter Bootstrap

How come I am unable to utilize the bootstrap editable table in this manner? <table id="addElements" data-height="299"> <thead> <tr> <th data-field="id" data-align="right">Item ID</th> < ...

javascriptcsstwitter-bootstrapbootstrap-table

Fix for - AttributeError: 'time' module does not have 'clock' attribute

I've been working on developing a ChatBot using a combination of HTML and Python. Despite using the latest version of Python (3.8), I encountered an error when trying to execute the form. I'm unsure why this error occurred since I made sure to us ...

pythonhtmlcsschatterbot

Steps for sharing a word file between two users

Can someone help me with sending a file to another user and providing them with a download link? I have already attached the file to the database table of the recipient, but now I need to figure out how to allow them to download and view it. I've hear ...

htmlruby-on-railsdownloadcontrollerpaperclip

Is it possible to utilize the AmMap API for developing an Android application?

I am currently in the process of creating a unique application with HTML, JS, and jQuery Mobile that will feature interactive maps. I have been searching the web for APIs to incorporate interactive maps into my project without using Google Maps APIs when I ...

javascriptandroidhtmlammap

Specify touch event regions with the ngTouch directive

I recently implemented ngTouch in my AngularJs web app to detect swipe left and right gestures. I am using this feature to open and close a side bar menu. Currently, the swipe events are linked to the entire wrapper like this <div ng-style="body_st ...

javascripthtmlangularjstouchangularjs-ng-touch

Showcasing Bootstrap navigation exclusively on mobile devices and including a scroll function on desktop screens

I am working on customizing a Bootstrap 4 top-sticky nav to only be visible on mobile devices. Using CSS (d-block d-md-none) can achieve this, but on desktop, I want the menu to fade in as the user scrolls down past a certain point and disappear when scrol ...

jquerycssbootstrap-4