时间戳

首页 > 解决方案 > 底部边框形如 \

javascript - 底部边框形如 \

问题描述

我正在尝试在像这张图片这样的盒子上制作悬停效果 解决方案

我尝试过使用透明的顶部和左侧边框，但我得到的只是底部边框额外的三角形指向另一个方向，就像这样照片

.news:hover {
  transform: translateY(20px);
  transform: translateX(-20px);
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: solid #F4698D 20px;
  border-right: solid #F4698D 20px;
}

标签： javascripthtmlcss

解决方案

一种解决方案是使用::after. 它位于左下角，覆盖边框，并有自己的类似于三角形的渐变背景。

因为边框的宽度用于确定覆盖元素的高度、宽度和偏移量，所以我选择将该数字存储为 CSS 变量。

:root {
  --border-width: 10px;
}

div { 
  padding: 50px; 
  border-bottom: var(--border-width) solid transparent;
  border-right: var(--border-width) solid transparent;
  position: relative;
}

div:hover {
  border-color: red;
}

div:hover::after {
  content: '';
  position: absolute;
  display: block;
  height: var(--border-width);
  width:  calc(2 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  left: 0px;
  background: linear-gradient(to right top, white 50%, red 50%);
  z-index: 2;
}
<div>Hover me!</div>

推荐阅读