Question

我试图创建一个切割正方形的三角形。

我尝试使用此代码，但它不会创建我想要的形状。

＆＃13;

<div class="square-cut"></div>

＆＃13;

        Uri uri = new Uri("http://createjs.com/demos/easeljs/Cache.html");
        webBrowser.Url = uri;             
        webBrowser.Navigate(uri);

＆＃13;

我想要的形状是：

currying

Answer 1

这是怎么回事（代码中的评论）：

/* make arrow as after pseudo element*/
.square-cut:after {
  content: '';
  display: block;
  line-height: 0%;
  font-size: 0px;
  background: purple;
  border-top: 20px solid purple;
  border-bottom: 20px solid purple;
  border-left: 40px solid white;
}
.square-cut {
  box-sizing: border-box;
  width: 50px; /* as arrow is 40px x 40px, this gives 10px under the tip*/
  height: 50px;
  padding: 5px 0; /* 5px on either side offat side of the arrow */
  background: purple;
  font-size: 0px;
}

<div class="square-cut"></div>

从正方形切出一个三角形

1 个答案: