Lock Shape using CSS

As you know the power of CSS, you can create anything using CSS. You can use this lock shape as an icon for every website. Here is the best example of creating a lock shape using CSS only.

In todays busy world, there is no time for everyone who waits for their site load. The user stays only for 3 seconds. If your site cannot load all content, users may change their minds and go for the following website. And using multiple heavy images is the fundamental reason for a slow website.

So we recommend that you try CSS shapes instead of images. By using CSS, custom shape your site load immediately.

You can use this lock shape using CSS for free for your website. Just copy this lock shape code in your CSS for the website and feel the power of pure CSS.

Lock Shape using CSS | CUSTOM CSS SHAPE

In this article, we will describe to you how to create a lock shape using only css. You need to follow the following steps to create a lock shape.

  1. Create an HTML file
  2. Create a div element in your HTML file
  3. Add lock class to your div or copy-paste whole code from below
  4. Create an external CSS or add a style tag in your head section and put the bellow code in your Html document

Try this lock shape using CSS

<title> Lock Shape using css - CSS SHAPES </title>

.lock { content: "";
    position: relative;
    border: 2.5rem solid #1b00ff;
    width: 13rem;
    height: 12em;
    left: 50%;
    margin-left: -9rem;
    top: 11rem;
    border-top-left-radius: 7rem;
    border-top-right-radius: 7em; }

    /* uper section of lock */

.lock:before { content: "";
box-sizing: border-box;
 position: absolute;
 border: 2.5rem solid #1b00ff;
 width: 14rem;
height: 12em;
left: 50%;
margin-left: -7rem;
top: -12rem;
border-top-left-radius: 7rem;
border-top-right-radius: 7em; }

/* lock area */

{ content: "";
position: absolute;
border: 1rem solid #1b00ff;
width: 5rem;
height: 8rem;
border-radius: 2.5rem;
left: 50%;
top: 3rem;
margin-left: -2.5rem; }

/* Keyhole of lock */

<div class="lock"> </div>
code by <a href="https://advdev.net"  rel="dofollow"> Advance Developer </a>
Lock Shape using css | CUSTOM CSS SHAPE

Here is the outcome of the upper code. Now it’s your turn; try it and enjoy the code.

Note: Tell us about your experience in the comment section. Also, tell us what custom CSS shape you need.

The advantage of using CSS custom shapes is that the CSS shapes are scalable, using them at any size. These CSS shapes are image-free, so we can say these shapes are lightweight and quick load.

If the given code is not working for you, please replace double quotes in CSS. These double quotes are automatically changed when I put the code in this article. So please replace them if the code is not working.

This code is created by me and working fine for me, and I tested it many times. So you can easily use this code. If not working after replacing the double quotes, please comment on your query. We will answer your query as soon as possible. And you can also ask me any question related to creating custom shapes.

You can also create many shapes like Hearts, Arrows, and many more. If you want to create shapes you should be a master in css. So practice hard.


We hope this article and CSS code helped you learn about the power of Lock Shapes in your web design process. If you have any questions, please leave a comment below or contact us at sunnymeghwal@live.com for more information!

Also Read: Custom CSS Cursor

Follow us on Facebook

Leave a Comment