What is the best way to create an L shape using CSS?

I am currently working on achieving a unique style using CSS.

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

My progress so far:

.file {
  width: 279px;
  height: 326px;
  background: linear-gradient(-135deg, transparent 66px, #A1A1A4 40px);
  position: relative;
}

.file::before,
.file::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-color: transparent;
  border-style: solid;
}

.file::before {
  border-top: 90px solid transparent;
  border-left: 90px solid transparent;
}

.file::after {
  margin-top: -2.6px;
  width: 0;
  height: 0;
  border-bottom: 93px solid #281EBE;
  border-right: 94px solid transparent;
}
<div class="file">
</div>

The current look of my design

The angle of the triangle is slightly off from 90 degrees. How can I create that transparent space between the blue triangle and grey rectangle?

htmlcsscss-shapeslinear-gradients

Answer №1

If I were to choose, I'd stick with a linear gradient approach like this:

body {
 background:pink;
}
.file {
  width:300px;
  height:600px;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/47px 47px no-repeat,
  linear-gradient(grey,grey)0 0/calc(100% - 50px) 100% no-repeat,
  linear-gradient(grey,grey)0 50px/100% 100% no-repeat;
}
<div class="file">
</div>

If you want to add a border around the grey section, you can incorporate more gradients like so:

body {
 background:pink;
}
.file {
  width:300px;
  height:600px;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/47px 47px no-repeat,
  linear-gradient(grey,grey)0 2px/calc(100% - 52px) 100% no-repeat,
  linear-gradient(grey,grey)0 52px/calc(100% - 2px) 100% no-repeat,
  linear-gradient(#000,#000)0 0/calc(100% - 50px) 100% no-repeat,
  linear-gradient(#000,#000)0 50px/100% 100% no-repeat;
  border-left:2px solid #000;
  border-bottom:2px solid #000;
}
<div class="file">
</div>

To make adjusting the shape easier, CSS variables can be utilized:

body {
 background:pink;
}
.file {
  --d:50px;
  width:150px;
  height:200px;
  display:inline-block;
  background:
  linear-gradient(to bottom left,transparent 50%,blue 50%) 100% 0/calc(var(--d) - 3px) calc(var(--d) - 3px) no-repeat,
  linear-gradient(grey,grey)0 2px/calc(100% - var(--d) - 2px) 100% no-repeat,
  linear-gradient(grey,grey)0 calc(var(--d) + 2px)/calc(100% - 2px) 100% no-repeat,
  linear-gradient(#000,#000)0 0/calc(100% - var(--d)) 100% no-repeat,
  linear-gradient(#000,#000)0 var(--d)/100% 100% no-repeat;
  border-left:2px solid #000;
  border-bottom:2px solid #000;
}
<div class="file">
</div>
<div class="file" style="--d:20px">
</div>
<div class="file" style="--d:110px">
</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

Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text. <script type ...

javascripthtmlcss

data not being transferred successfully to the SQL input from forms

The data from this input form is not being properly transferred to the SQL database when using the sqlAddUser.php file available at pastebin.com/W9BH0D3s. The form includes the following fields: <form action="sqlAddUser.php" method="post"> <div c ...

phphtmlmysqlforms

Detecting collisions in JavaScript

Currently, I am in the process of reviving an old game reminiscent of Tron using HTML5 canvas and JavaScript. The unique twist in this version is that the snakes have the ability to move in curves rather than right angles (known as Achtung Die Kurve). The ...

javascripthtmlcollision-detectionhtml5-canvas

Showing hidden errors in specific browsers via JavaScript

I was struggling to make the code work on certain browsers. The code you see in the resource URL below has been a collection of work-around codes to get it functioning, especially for Android browsers and Windows 8. It might be a bit sketchy as a result. ...

javascriptandroidjqueryhtml

Resolve background image alignment issue in Firefox browser for Bootstrap carousel

I am currently utilizing this particular bootstrap template. My goal is to have the carousel background images fixed, however, when I include the following CSS: background-attachment: fixed; like so: <div class="carousel-item active" style=&q ...

htmlcssbootstrap-4

Challenge with PHP mail function in sending emails

I run a website and have a "Contact" section where users can fill out a form to reach me. The form is a basic one with its action being a php page. Here is the php code: $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4 ...

phpjavascripthtmlemail

Filling Dropdown Options with Data from PostgreSQL

I've been attempting to create a dropdown list for an HTML form that is populated from a PostgreSQL table column. However, being new to this, I haven't been able to get it to work successfully. I have some code that I've been studying and tr ...

phphtmlpostgresql

Perform an SQL function to select and update data

I need to run this code, but I'm missing one key variable that I can't seem to locate. Here's my current code snippet: SELECT CODE = 'P1R2G1' and CATEGORY = '20M' IF RANK op1 = '1' THEN UPDATE tourneyeventga ...

phphtmlsqlphpmyadminsql-update

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

javascriptjqueryhtmlcss

Basic animation feature malfunctioning

So, I'm really new to this whole HTML5 canvas thing and I'm trying to make a pixel move across the screen with an additive tail behind it. The idea is for the tail to scroll away once it reaches a certain point while the pixel continues moving. I ...

javascripthtmldhtml

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...

htmlcssanimationslider

Using Python in Django to seamlessly add products to the shopping cart

Seeking guidance in creating a simple function that can capture the product ID and insert it into the user's shopping cart upon clicking the "add to cart" button. I have already set up the shopping cart table and the product table but am struggling to ...

pythonhtmldjangofunctionshopping-cart

Bringing Vue Components Together in Laravel: A Guide to Component Importation

Recently, I started learning Vue.js and I am looking to understand how to use component. Unfortunately, when I attempted to import my component into another component, it didn't work as expected. The framework I am currently using is Laravel 5.8 and I ...

javascripthtmlvue.js

How to set the default theme color for the mat-sidenav background in Angular 6 and 7?

Is there a way to make the background of a mat-sidenav match the theme color of my mat-toolbar? In the file src\styles.scss, I have the following: @import '~@angular/material/prebuilt-themes/indigo-pink.css'; The template / HTML file incl ...

htmlcssangularangular-material

do not display bullet points

The bullets from the list-style type are not appearing. Despite the CSS code never declaring list-style-type: none, I have specifically declared list-style-type: disc for the section in question. I even checked with Firebug and other tools, and it is evide ...

csslist

jquery method for choosing the first character of the HTML DOM

What is the best way to select the first character in HTML DOM using jQuery? I attempted to use $('#pcode')[0]; but it did not return the first value. Instead, when I tried to print it, I received [object HTMLInputElement]. How can I correctly se ...

jqueryhtmldom

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...

javascriptjqueryhtmlcss

Having trouble with the functionality of the cascading menu?

I am having trouble with a drop-down menu. The first level works fine, but I can't seem to get the second level of the menu to display. Appreciate any help you can offer. Thank you. javascript <script type="text/javascript"> $(document).ready( ...

javascriptjqueryhtmlcss

A textarea with a height of zero is still visible

My goal is to create collapsible widgets within a side panel on my webpage. Overall, the functionality works smoothly. I am able to adjust the height of child divs to 0px with a transition, causing them to disappear. However, I have run into an issue wher ...

javascripthtmlcss

Initially, the 'display none' CSS command may not take effect the first time it is used

I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application work ...

javascriptjquerycss