Lock Shape using CSS

Lock Shape using CSS | CUSTOM CSS SHAPE

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 are no time to everyone who wait for their site load. User wait only for 3 second. If your site uable to load all content user may change their mind and go for the next website. And using multiple havy images is the basic reason of slow website.

So we recommend that try CSS shape 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.

How to create a lock shape using CSS?

Your answer is here.

  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

<HTML>
<head>
<title> Lock Shape using css - CSS SHAPES </title>
<style>


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


.lock:after
{ content: "";
box-sizing:border-box;
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 */


</style>
</head>
<body>
<div class="lock"> </div>
code by <a href="https://advdev.net"  rel="dofollow"> Advance Developer </a>
</body>
</html>

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

Lock Shape using css | CUSTOM CSS SHAPE

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

The advantage of using CSS custom shapes is the CSS shapes are scalable, you can use them at any size. these CSS shapes are image-free so we can say these shapes are lightweight too, and also quick load. Click here for more tips and other javascript tricks.

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 much time. so you can easily use this code. if not working after replacing the double quotes please comment your query. we will definitely answer your query as soon as possible. and you can also ask me any question related to creating custom shapes.

Leave a Comment