Creating an angular div with rounded corners in the bottom right corner is a simple and stylish way to enhance the look

I've been attempting to design my div to resemble this example, but unfortunately, I haven't had much luck. I experimented with the polygon method to achieve the desired look, but all I managed to create was an angled line that didn't align with the border radius. Additionally, I tried using the transform method, but I couldn't get it to display beneath my navigation div. Does anyone have any suggestions for achieving this outcome without resorting to SVG files?


    <header>
      ...
    </header>

SCSS:


    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        list-style: none;
    }

    .navigation {
        background: #6426dd;
        ...
    }
htmlcsssass

Answer №1

To achieve the desired effect, you can use a skew transformation along with radius:

.rectangle {
  height: 300px;
  position: relative;
  z-index: 0;
  overflow:hidden;
}

.rectangle:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% 0 0;
  background:#7054f3;
  border-bottom-right-radius:100px;
  transform-origin:left;
  transform:skewY(-5deg);
}
<div class="rectangle">

</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

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

phphtmlcssdatetime

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

htmljquerycssweb

Having trouble with the PHP WHERE query - it's not functioning

Recently delving into PHP, I have a requirement to verify a user's email in the database and redirect them to the next page if it exists. However, my SQL query seems to be malfunctioning in PHP but works fine in the SQL database. The structure of my ...

phphtmlmysql

"Troubleshooting the issue of consistently receiving null values when uploading files with

I'm facing an issue with uploading a file using jQuery AJAX. Although I can see all the details of the file object such as its name and size, when I check the console with formdata.get("files"), the context.request.files size always shows zero. It see ...

htmljqueryasp.netajaxhttppostedfilebase

Ways to identify the visible elements on a webpage using JavaScript

I'm working on a nextjs app , I am looking to dynamically update the active button in the navbar based on which section is currently visible on the page. The child elements of the page are structured like this: <div id="section1" > < ...

javascripthtmlreactjsnext.js

Exporting image to excel using HTML code

I am working on a unique project where I have successfully converted an image through canvas object and placed it within a div tag, which is nested in a table tag. My goal now is to export this table to Excel using ColdFusion. Below is the code snippet tha ...

htmlcoldfusion

Tips for effectively managing JSON data in my application

I'm working on a project to create a website that monitors the number of coronavirus cases in my country. The data is organized and stored in a file called cases.json using the following structure: { day: { city: { cases: 1 } ...

htmljson

Position two child divs side by side within a parent div

Here's what I have accomplished so far: http://jsfiddle.net/cHKF4/3/ However, I am aiming to incorporate small boxes (box1 and box2 inside late) #late { position: relative; border-style: solid; border-width: 3px; border-color: #00ff ...

htmlcss

Modify the appearance of a span element when an input is in focus

I am trying to display the word "test" by focusing on a text input. However, when the text input is focused, the z-index of the text should change to 0 but it's not working as expected. I have provided my code below: .text{ position: absolute; ...

css

Attempting to assign a class name to the <a> tag proves challenging as it seems to reset upon clicking the link, causing the class to vanish

Looking at this HTML code snippet <li> <a href="javascript:;"><i class="sidebar-item-icon ti-hummer"></i> <span class="nav-label">Product Management</span><i class="fa fa-angle-left arrow"></i>&l ...

javascripthtmlajaxlaravel-6

Incorporate external visuals into printed materials

When a page is printed, a heading should be accompanied by an image to the right. I have defined the following stylesheet: @media print { h1::after { content: url( IMAGE_URL_HERE ); position: absolute; top: 0; right: 0; } } The issue ...

cssprinting

Altering the display attribute cancels out any opacity transitions

When using JavaScript to change the opacity of an element with transition: opacity 1s, the expected duration of one second is met, as demonstrated here: onload = e => { var p = document.getElementsByTagName("p")[0]; p.style.opacity = 1; }; p { ...

javascripthtmlcss

Using Masonry with AngularJS templates: A step-by-step guide

Hey there! I'm trying to incorporate masonry into my AngularJS project. I'd like the divs to flow from left to right within their container. The documentation suggests using the following code: <div class="js-masonry" data-masonry-options=&ap ...

htmlcssangularjsjquery-masonry

What are the steps to implementing a grid image system in Bootstrap4?

How can I use Bootstrap4 and CSS3 to position picture 4 and 5 under picture 2 and 3 within a grid layout? <main> <div class="container-fluid"> <div class="row"> <h1 class="col-12">Anonymous& ...

cssbootstrap-4grid

What is causing the gap to appear between the image and the div element underneath?

I recently encountered an issue where I set up an image to scale to full width, but it was always cut off at the bottom when it extended too high. Here is my current setup: div, img, body { margin: 0; padding: 0; } #image { width: 100%; he ...

htmlcssimage

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display the information in the second dropdown menu once the selection has been made in the first dropdown menu

I've successfully implemented a feature where selecting an option from the first drop-down list populates the second drop-down list accordingly. The HTML code snippet is as follows: <select size="1" id="BodyPart" title="" name="BodyPart"> ...

javascriptphpjqueryhtmldrop-down-menu

Can display-inline-block support top margin and text alignment?

Can you please explain if the top margin and text-align properties work for both display: inline and display:inline-block? If they do, could you provide some insight as to why? ...

htmlcssblockinlinedisplay

Prevent Column Breaks in Bootstrap by Setting Minimum Width

I have the following code and I am trying to create two columns with a minimum width for mobile browser support. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <div class="container"> ...

csstwitter-bootstrap

Trying out basic form validation - Adjusting border color for an empty input

Currently, I am experimenting with a basic login form using PHP and testing it out on XAMPP in Chrome. Below is the code for the login form: <form action="login.php" method="POST"> <label>User: </label> <i ...

phpcssinputcolors