How to create CSS angled edges

      No Comments on How to create CSS angled edges

How to create CSS angled edges -using CSS Masks and Transforms

By angled edges, we means edges of div/or any content inclined on certain angles. There are possibly two ways to create these:

  • By using clip-path property of CSS
  • By using CSS transforms

How to create CSS angled edges using clip-path

CSS clip-path properties lets certain portion of an element be visible by defining a clipping region.The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.

Let us see an example:

See the Pen Using clip-path for angled edges by scanfcode (@scanfcode) on CodePen.

/* keyword value */
clip-path:none;

/* global values */
clip-path:inherit;
clip-path:unset;
clip-path:initial;

/*image values */
clip-path:url(resources.svg#id1);

/* box values */
clip-path:fill-box;
clip-path:stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box

/* geomerty values*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

How to create CSS angled edges using CSS transform

Here is the code:

<style>
#angled_demo
{
 width:300px;
 height:200px;
 background:#ff5050;
 z-index:1;
 position:relative;
}
#angled_demo:after
{
  background:inherit;
  position:absolute;
  content: '';
  left:0;
  height:50%;
  right:0;
  bottom:0;
  display: block;
  transform: skewY(-3.5deg);
  transform-origin: 100%;
  z-index:-1;
}
</style>
<div id="angled_demo">
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *