Can I add a point border to a mat-menu-list component?

Is there a way to add a speech bubble point on the top-right corner of my mat-menu-list? I tried wrapping the mat-menu-list with the code below:

.menuPoint {
    position: relative;
    background: #143342;
    color: #FFFFFF;
    font-family: Arial;
    font-size: 20px;
    line-height: 120px;
    text-align: center;
    width: 250px;
    height: 120px;
    border-radius: 10px;
    padding: 0px;
}
.menuPoint:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-width: 0 0 20px 20px;
    border-color: transparent transparent  #143342 transparent;
    top: -20px;
    left: 95%;
    margin-left: -10px;
}

<div class="menuPoint"></div>

cssangular

Answer №1

Have you been searching for a solution like this? After experimenting with the position values, I made adjustments such as removing the z-index from the generated pseudo-element and eliminating the border-radius from the top right corner where the pseudo-element appears.

.menuPoint {
  position: relative;
  background: #143342;
  color: #FFFFFF;
  font-family: Arial;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  width: 250px;
  height: 120px;
  border-radius: 10px 0px 10px 10px;
  padding: 0px;
  /* for demonstration purposes */
  margin-top: 50px;
}

.menuPoint:after {
  content: '';
  position: absolute;
  display: block;
  border-style: solid;
  border-width: 0 0 20px 20px;
  border-color: transparent transparent #143342 transparent;
  top: -20px;
  right: 0;
}
<div class="menuPoint">hello there!</div>

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

Angular shows an error when attempting to assign a parameter of type "" to a string[] type

While deploying my application through Visual Studio, I encountered an error when running "node_modules\webpack\bin\webpack.js --env.prod". Despite adding ("strictNullChecks":false) to my ts.config.json, the issue persists. Any assistance in ...

angulartypescript

App routing functions correctly when navigating within the app, but does not work when directly entering a URL into

After creating an angular 11 app with routing modules, I encountered an issue where typing a specific path in the browser address bar did not navigate to the expected destination. The app functioned correctly when started from the domain URL, leading to th ...

angularangular-routingangular-router

Can the Rxjs library's Observables of() function be used to output multiple values?

I am inquiring about this because I came across in the Angular documentation that of(HEROES) returns an Observable<Hero[]> which emits a single value - an array of mock heroes. If I cannot use of(), do you have any alternative suggestions for me? I ...

angulartypescriptrxjs

What is the best way to extract items from another array that have approved IDs - is it through using map(), filter(),

I am unsure about the best approach to retrieve only the items (array with objects) that have been approved based on their id. Should I start by using map() and then filter(), or should I filter() them first and then map()? export class AppComponent { ...

arraysangulartypescriptdictionaryfilter

I would like to take the first two letters of the first and last name from the text box and display them somewhere on the page

Can anyone help me with creating a code that will display the first two letters of a person's first name followed by their last name in a text box? For example, if someone enters "Salman Shaikh," it should appear somewhere on my page as "SASH." I woul ...

phpjavascriptjqueryhtmlcss

Angular: Creating an instance of a class with StaticProvider passed as a parameter

Having trouble instantiating a class with a StaticProvider. Here's the code snippet: main.ts export function createProvider() { // some implementation return result; // result is a string } const providers = [ { provide: 'TEST' ...

angulardependency-injectionangular-providers

Show a distinct cursor when hovering over text (excluding the element)

When the default cursor hovers over text, it switches to a caret-shaped cursor. This behavior only occurs when hovering over text; if you hover elsewhere inside the element, the specific cursor will not be displayed. For example, I am aiming for a setup s ...

javascripthtmlcssmouse-cursor

Steps for utilizing an `<a>` link tag to submit a form in Angular 4

Is there a way to retrieve the selected option in this form from the other side when clicking a link? <form (ngSubmit)="onSubmit(x)"> <input type="radio" id="radioset3" name="radioset" [checked]="x==0"> <input type="radio" id="radio ...

htmlangulartypescript

Tips for utilizing the not CSS selector in your stylesheet without the asterisk

My challenge lies here: I am facing an issue with my External Style Sheet where the "*" selector is defined as follows: * { margin: 0em 4.2em 0em 0em; padding: 0em; } The problem arises when I have a tree view control in my aspx page. The above selector ...

htmlcssasp.nettreeview

How can we specifically aim for victory with only IE7 in mind?

Is it possible to target only ie7 using a specific hack, similar to how we can target both ie6 and ie7 with the * hack? ...

cssinternet-explorer

What is the best way to make an animated image move?

Seeking guidance on how to achieve a particular effect like the one showcased at I'm specifically interested in replicating the block movement upon hover and the change in block coordinates when the cursor is not active. Does anyone know of a suitabl ...

javascriptjqueryhtmlcssslider

I'm struggling to understand how to upload pictures from my files onto my website

Adding images to my website has been more challenging than I expected. For example, if I have a folder named "images" on my computer's desktop with an image called "eye," will the following code display the image correctly? <img src="Desktop ...

htmlcss

What is the best way to convert Angular libraries to ES2016 format?

I have made the decision to completely stop supporting outdated browsers and discontinue support for ES5 compilation/polyfills. Currently, my Angular project code is compiled with approximately 85% coverage as shown below: "compilerOptions": { ...

angulartypescriptecmascript-6ecmascript-2016

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

javascripthtmlangulartypescriptjspdf

How to adjust the grid-gutter-width in Bootstrap 4.5 container?

If we want to change the $grid-gutter-width: 30px !default; variable specifically for the .container class, we can do so in the _variables.scss file. For example: .container { padding-left: 40px; padding-right: 40px; } Where can I make this custo ...

htmlcsstwitter-bootstrapbootstrap-4sass

Issue: Angular 14 - Validators Not Resetting in Nested FormGroup

I am currently working on implementing a nested FormGroup. However, I have encountered an error when attempting to reset the form. Here is the structure of the form: form: UntypedFormGroup; this.form = this.fb.nonNullable.group({ f1: [''], f2: ...

javascriptangulartypescriptangular-reactive-formsangular-forms

Encountering issues while trying to incorporate a trading chart library into an Angular 7 project

ERROR in src/assets/datafeeds/udf/src/udf-compatible-datafeed-base.ts(243,74): error TS2339: 'errmsg' Property Not Found The property 'errmsg' does not exist on the type 'UdfErrorResponse | UdfSearchSymbolsResponse'. The p ...

javascriptangulartradingview-api

Unable to click on overlay in Internet Explorer version 8

When I click my overlay in different browsers like Firefox, Chrome, and IE9, the onClick function is triggered as expected. However, in IE8, it seems like the box is not clickable at all and the content behind it is receiving the click events instead. Here ...

cssinternet-explorer-8

Conceal Content from Onsite Search

Is it possible to conceal text from on-page browser searches (e.g. Ctrl+F) in a dependable manner while keeping it visible? I thought that adding aria-hidden="true" would address the issue, but the text remains searchable by browsers. ...

csshtmlwai-aria

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox