Text inside a CSS geometric figure

I've run into a bit of a roadblock. I managed to create the left div, but now I'm struggling with the second div on the right. Any suggestions?

Css Shape

Here is the HTML

<div class="shape">
  CHOOSE YOUR STYLE
    </div>

and here is the CSS

      .shape{
  text-align:center;
  background-color:#8ed7c2;
  width:50%;
  height:178px;
  line-height:178px;
  color:#fef5ca;
  float:left;
  position:relative;
  font-size:50px;
  top:20px;


}
.shape:after{
  content:"";
  width:0px;
  height:178px;
  border-top:178px solid rgba(3,78,136,0.7);
  border-right:60px solid transparent;
  position:absolute;
   left:100%;


}

Answer №1

This is the HTML

<div class="shape">
  SELECT THE MEDIATOR
    </div>

and here is the corresponding CSS

      .shape{
  text-align:center;
  background-color:#8ed7c2;
  width:50%;
  height:178px;
  line-height:178px;
  color:#fef5ca;
  float:left;
  position:relative;
  font-size:50px;
  top:20px;


}
.shape:after{
  content:"";
  width:0px;
  height:178px;
  border-top:178px solid rgba(3,78,136,0.7);
  border-right:60px solid transparent;
  position:absolute;
   left:100%;


}

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 centrally position a <mat-card> on the screen using Angular 9?

* I'm struggling to center a <mat-card> on the screen, specifically within the toggle-device-toolbar. It's intended for mobile phones and I could use some guidance. I'm working with angular-material and ng-bootstrap* Here is the code ...

Creating a bar graph using JSON response with the help of jQuery

I am working on an AJAX call that, upon success, receives a JSON response with a fixed number of columns but varying entries. I need assistance in creating a bar chart using jQuery to visualize this data. [ { "amount": XX, "instanceId": ...

Challenges with Bootstrap input groups

Despite trying various solutions, nothing seems to be working for me. I attempted using width:200px, but the issue persists. Since my form was quite outdated, I decided to switch to a bootstrap version. However, while others are able to resolve the issue w ...

creating a custom website layout

Currently, I am in the process of developing a website and I am absolutely obsessed with the page design. For instance: I have a page that can be divided into two sections - the left side and the right side. The left side consists of various menus, while ...

Insert more text following the existing content

Is it feasible to include text using pseudo-elements ::after or ::before to a specific word? For example, I am interested in placing a PDF icon consistently beside the word "Download". [PDF] Download Alternatively, are there other methods available? ...

Using AJAX to dynamically load an image by setting the image path as the source of the image tag

I'm facing a challenge with my AJAX call that is used to display user details in a modal. I recently integrated an image upload feature for users, but now I'm struggling to display the uploaded image. I have tried looking for solutions online, bu ...

Activate the toggle menu

Hi there! I'm currently working on a menu and I want the clicked item to become active, switching the active state to another item when clicked. However, my current implementation is not working as expected. Any assistance would be greatly appreciated ...

Launch the game within the gaming application

I am looking to incorporate a game within another game... Here's what I mean: Open the app: Pandachii Next, navigate to the 4th button (game pad). When we click on the game icon, I want to launch another game (located below the Pandachii window - c ...

adjusting array based on screen size fluctuations

Imagine having two arrays of images named landscape_images[] and portrait_images[]. One is for the landscape view and the other for the portrait view. When the screen width is in landscape mode, the wide resolution images will be displayed on the body. C ...

adjusting label widths using jQuery mobile

I am currently using jQuery mobile to develop my user interface, however I am facing an issue with adjusting the width of my labels. Can anyone provide guidance on how to set the width of all my labels to 108px? http://jsfiddle.net/GZaqz/ Check out the c ...

Embedding external javascript within another javascript file

I have two pieces of code - code 1 and code 2. Code 1 is login.html which I am saving as login.js, and code 2 consists of some jQuery and JavaScript codes. My problem is how to insert the first code into the second code. Code 1: login.html (saved as logi ...

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

Utilize the float feature in Bootstrap4 exclusively for a specific screen size

When working in Bootstrap 4, I am looking to apply "float-right" styling to a button specifically within the .col-sm-* class. While I have successfully used offsets for other situations, the width of the button is too long to offset this time and I prefer ...

Is there a solution to resolve the flex 50% layout problem specifically in Safari?

Currently, I am facing an issue with Safari (Version 10.1.2 (12603.3.8)) while working on a small example of flex layout. The problem arises when I attempt to place four boxes inside a content div in a 2x2 layout and have them fill the height and width by ...

Retrieve the content of the nearest 'td' element using the '.closest()' method, then locate the desired

I am struggling to assign the value from a <td> to a variable. My approach involves utilizing the closest() and find() methods in jQuery to locate the desired <td>. Interestingly, when I use alert on the <td>, it displays the correct val ...

Ways to conceal a div with jQuery

Is there a way to make the div disappear when the user clicks on the checkbox? I have tried using this code, but it doesn't seem to be working. $('input.maxtickets_enable_cb').change(function() { if ($(this).is(':checked')) ...

Ensuring the security of updated data

As I explore various websites, including SO and my own, I have noticed a common practice of storing row IDs of data retrieved from a database in an HTML attribute. This data can be manipulated by the user on the client side and potentially sent to the serv ...

How much does it typically cost to implement external libraries into a project?

Here are some of the most commonly used front-end web development libraries: jquery-min.js (95.9 kB) angular.min.js (108.0 kB) bootstrap.min.css (113.5 kB) bootstrap-theme.min.css (19.8 kB) bootstrap-fonts (185.7 kB) bootstrap.min.js (35.6 kB) All in al ...

Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> ...