Creating a bordered triangle using only CSS

Looking to create a message holder with a triangular tip bordered shape? I've successfully crafted the tip using two triangles:

#triangle-border {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 100px 80px 100px;
    border-color: transparent transparent #edb2b7 transparent;
}
#triangle-content {
    position:absolute;
    top: 20px;    
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 100px 80px 100px;
    border-color: transparent transparent #F9EDEF transparent;
}

I'm convinced it can be achieved with a single HTML object, but struggling to figure out how. Any chance you could assist?

I've included an example of the message container design I'm aiming for.

htmlcss

Answer №1

Check out this JSFIDDLE link to see a demonstration of using pseudo elements like :after and :before.

<div id="message-holder"></div>

#message-holder {
    margin-top:50px;
    width:300px;
    height:300px;
    background: #F9EDEF;
    position:relative;
    border:1px solid #edb2b7;
}

#message-holder:before,#message-holder:after{
    content:"";
    position:absolute;
    top:-24px;
    left:25px;
    border-bottom:25px solid #f9edef;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
}
#message-holder:before{
    top:-25px;
    border-bottom-color:#edb2b7;
}

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

What is the best way to target only the immediate children of a div when using tailwindcss?

Here is the HTML code snippet I am working with: <div class="section"> <div class="header">header</div> <div class="content"> <div>sub contents 1</div> <di ...

htmlcsstailwind-css

Sending emails through a basic HTML/PHP form is incredibly time-consuming

Seeking assistance with optimizing my email form that utilizes the POST function alongside a PHP mailto() feature. The process of sending the form takes significantly longer than expected. Any suggestions or guidance would be greatly appreciated. Here&apo ...

phphtmlformsmailto

Unusual dark streak beneath the Wordpress emblem

I recently created my website using Wordpress and decided to use a PNG image (140*82 px) as the logo instead of the default "site-title". However, I encountered an unusual issue where a black line appeared just below the image. After checking my "header.ph ...

phphtmlcsswordpress

The Window.print() function may experience compatibility issues across different browsers

When attempting to utilize the Window.print() function, I encountered an issue where it works perfectly in Google Chrome but not in Mozilla Firefox. Attached are screenshots displaying the problem at hand. What could be causing this discrepancy? Furthermor ...

javascriptcss

Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them? The situation is as follows: 1. More than 8 functions utilizing setInterval for act ...

javascriptjqueryhtmlcss

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

javascripthtmliframeembedded-resource

I'm running into an InvalidSelectorError and I could use some assistance in properly defining

As I gaze upon a massive dom tree, my task using NodeJS/Selenium is to locate an element by the title attribute within an anchor tag and then click on the associated href. Despite being a newcomer to regex, I am encountering numerous errors already. Below ...

javascripthtmlseleniumdomxpath

Transforming "datetime-local" into java.sql.Timestamp

I am working on a JSP page that has a form containing an input field with type "datetime-local". The data from this form is then passed to a servlet using the following code: String resetTimeString = request.getParameter(RequestParameterName.RESET_TIME); ...

javahtmltimestamp

Create a heading for the selection menu

I need to customize a dropdown list on my page so that the text "Select Language" is always displayed to the user, regardless of whether they make a selection from the dropdown. Even if the user chooses "Option 1" or "Option 2," the default text should sti ...

c#jquerycssasp.nethtml-select

Move the scroll event binding from the parent element to the child element

I'm working on an HTML page with the following structure: <div class="parent"> <div class="child1"> <div class="child2"> </div> </div> </div> Currently, I have a scr ...

javascripthtmlcssangularjs

Tips for creating the appearance of a resizable element

My goal was to replicate the resizing and moving functionality of elements in Adobe Illustrator using CSS alone. Unfortunately, I couldn't find any useful resources on how to achieve this. ...

cssresizecontrolsoutline

Displaying a success dialog after closing a Bootstrap modal

I have set up a bootstrap modal containing a form. Upon submitting the form, the form content is hidden and a bootstrap alert message is displayed. However, upon clicking the bootstrap popup, the same alert message is shown in the popup instead of displayi ...

jqueryhtmlcsstwitter-bootstrap

I'm encountering inexplicable duplications of elements on my Wordpress site

Here is an example of my template header: <header> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <a class="menu-toggle">menu</div> <?php wp_nav_menu( array('them ...

javascripthtmlwordpress

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

Looping through multi-dimensional JSON objects with jQuery

Hello there, I'm currently facing some challenges in getting the screen below to work properly: Project progress screen I have generated the following JSON data from PHP and MYSQL. My goal is to display the project alongside user images and names whe ...

javascriptjqueryhtmlarraysjson

FitText.js malfunctioning

I'm currently experimenting with using FitText.js to dynamically adjust the size of headlines to fit within the limits of the browser width. Interestingly, while this script successfully resizes the text in multiple sections of my website, it seems t ...

javascriptjquerycsswebfontsfittextjs

Strip the CSS styling from an image (the CSS being included in the generated code)

I need to remove the CSS styling from an image, but I can't modify the generated code where it's coming from. My actual code looks like this: <div class="bubble"> <img id="one" src="/static/webupload/MyronArtifacts/images/descarga.png ...

javascripthtmlcss

Utilize data attributes in VueJS to dynamically style elements

Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I man ...

cssvue.jsstyles

Designing a visually appealing widget in a jQuery UI theme by floating two elements neatly inside

My code looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Testing PasteHTML.co ...

cssjquery-ui