主页 / 问题 / 979383
Accepted
xSkanavi
Asked:2020-05-08 21:02:13 +0000 UTC2020-05-08 21:02:13 +0000 UTC

如何布置带有斜坡的街区

  • 772

右边的这个三角形有问题

css3

1 个回答

  1. Best Answer

    CSS 选项：

    右边的箭头是因为transform: scale(0.2,1) rotate(45deg);这给出了一个菱形，从中取了2个边界

    div {
  width: 100px;
  height: 152px;
  border: 1px solid red;
  border-radius: 9px;
  border-right:transparent;
  position: absolute;
  box-shadow: -3px 0px 4px 0px rgba(255,0,0,0.2);
}

div:after {
  content: '';
  border-right: 1px solid red;
  border-top: 1px solid red;
  height: 100px;
  width: 100px; 
  position: absolute;
  right: -50px;
  top:26px;
  transform: scale(0.2,1) rotate(45deg);
}

div:before {
  font-family:arial;
  color:red;
  font-size: 20px;
  position: absolute;
  content: 'Смотреть все';
  transform: rotate(-90deg);
  top:60px;
  left:-30px;
}
    <div></div>

    • 1

相关问题