CODEWITHSUNDEEP
javascripthtmlcss
lukasz
lukasz

Reputation: 927

Hide a pie-part of a square/rectangle div

So lets say i have a div 100px width and height and i would like to hide just a part of it using CSS/HTML/JS And this part should be a part of a pie like a pizza triangle. Here is an example: enter image description here

So i want to cut a part of it like it would be a circle having a coordinates of a middle point and a start/end angle of cut part.

Upvotes: 3

Views: 339

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could do it with a SVG shape, using a polygon or with some CSS transformations but without real transparency (as in your image).

Example on codepen http://codepen.io/anon/pen/jLdez/

Markup for SVG solution

<svg width="100px" height="100px" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

  <desc>Square without a pizza slice</desc>
  <polygon fill="cyan" points="0,0 0,100 100,100, 100,30, 50,50 70,0" />

</svg>

Style for CSS solution

div { 
  background: cyan;
  overflow: hidden;
  width: 100px; height: 100px; 
  position: relative; 
}

div:before {
  content: "";
  position: absolute;  
  right: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #fff;
  -webkit-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  -ms-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  -moz-transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
  transform: skew(-42deg) translate3d(30px, -60px, 0) rotateZ(-25deg);
}

Resulting screenshot

enter image description here

Using transformations all edges are still smooth, but with this approach you need to calculate by hand the values of skew and rotate instead of passing a list of coordinates — as in the SVG approach — and you need to also specify the exact background-color for the pseudoelement.

Upvotes: 3

Kyle Needham
Kyle Needham

Reputation: 3389

You can use CSS :after and transform to position a triangle over the right corner.

HTML

<div class="sqaure"></div>

CSS

.sqaure {
    position: relative;
    background: cyan;
    width: 100px;
    height: 100px;
}

.sqaure:after {
    position: absolute;
    top: -20px;
    right: -40px;
    content:"";
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 90px solid white;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

Live Example

Upvotes: 0

Related Questions