Question

这就是我想要实现的目标：

我希望在下面的代码中“剪切”内容的左下角（类似于如果你折叠了一页的一角）我想知道我是否可以对下面的CSS进行任何调整来实现这一目标。

.model-properties {
  padding: 0.8em 3em;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20%;
  min-width: 15%;
  z-index: 2;
  display: none;
  color: #c6d2db;
  font-size: 13px;
  background: linear-gradient(180deg, #182229, #182229, #293741, #293741);
  max-height: 700px;
  overflow: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<div id="model-properties-container" class="model-properties">

Answer 1

.model-properties:before,
.model-properties:after
{
    bottom: 0;
    left: 0;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.model-properties:after {
    border-color: #88b7d5;
    border-left-color: white;
    border-bottom-color: white;
    border-width: 30px;
}

https://jsfiddle.net/e46xvp3x/3/

使用CSS在我的盒子容器上切一个角

1 个答案: