主页 / 问题 / 963642
Accepted
John
Asked:2020-03-31 17:09:15 +0000 UTC2020-03-31 17:09:15 +0000 UTC

如果可能的话，如何在纯CSS中制作这样的东西[重复]

  • 772

我需要为这样的箭头创建一个新标签吗？如何布置它，我可以处理块本身，但这是制作这样的箭头的合理方法

在此处输入图像描述

html

1 个回答

  1. Best Answer

    当然，我会借鉴svg，但这里是html+ css，因为我真的很想：

    div.example {
  position: absolute;
  height: 75px;
  width: 50px;
  background-color: red;
  transition: 150ms;
}

div.example:hover {
  height: 100px;
  cursor: pointer;
}

div.example:after {
  position: absolute;
  bottom: -15px;
  content: '';
  width: 0; 
  height: 0; 
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 15px solid red;
}
    <div class="example"><div>

    这里只是svg一个选项：

    path {
  transition:100ms;
  fill:red;
  cursor: pointer;
}

path:hover{
  transform: translate(0, 25px);
}
    <svg viewBox="0 0 50 150" width="50" height="150">
  <path d='
    M0,-50 
    l50,0
    l0,125
    l-25,15
    l-25,-15
    z
  '></path>
</svg>

    乍一看，没有什么区别，但是一旦你开始尝试为这个形状或其他一些三重边框制作渐变背景，你会发现该svg选项比该选项灵活得多css。

    path:hover{
  transform: translate(0, 25px);
}

path {
  fill: red;
  fill-opacity: 0;
  stroke-width: 2.2px;
  stroke: red;
  stroke-miterlimit: 5;
  stroke-dashArray: 1111;
  stroke-dashoffset: 1111;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-name: fill-stroke,  fill-body;
  animation-duration: 2.5s, 1s;
  animation-delay: 0s,  1s;
  transition: 100ms;
  cursor: pointer;
}

path:hover{
  transform: translate(0, 25px);
}
    
@keyframes fill-stroke {
  to {
    stroke-dashOffset: 0;
  }
}

@keyframes fill-body {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 0.5;
  }
}
    <svg viewBox="-5 -5 60 150" width="50" height="150">
  <path d='M0,-50 l50,0 l0,125 l-25,15 l-25,-15 z'></path>
</svg>

    • 2

相关问题