Create Shape With CSS

Copy following code:

https://bennettfeely.com/clippy/

https://sharkcoder.com/visual/shapes

 
<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --arrow-shape: polygon(0 0%, 77% -37%, 105% 40%, 100% 101%, 70% 100%, 30% 100%, 0 100%, 0% 30%);
}

.parallelogram-outline {
  display: inline-block;
  background-color: black;

  clip-path: var(--arrow-shape);
  border: 0.1px solid black; /* Add a border with a width of 0.1 units to the parallelogram outline */
}

.parallelogram {
  font-family: sans-serif;
  background-color: #534686;
  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
  clip-path: var(--arrow-shape);
  border: 0.1px solid black; /* Add a border with a width of 0.1 units to the parallelogram */
}


</style>
<title>Page Title</title>
</head>
<body>
<div class="parallelogram-outline">
  <div class="parallelogram">
<p>This is a paragraph.</p>
  </div>
</div>

<p>This is a paragraph.</p>

</body>
</html>

Search This Blog

Html OR CSS OR JavaScript

Create Shape With CSS

Copy following code:

Comments

Post a Comment