时间戳

首页 > 解决方案 > 在css中使用剪辑路径的曲线边框

javascript - 在css中使用剪辑路径的曲线边框

问题描述

嗨，我正在尝试在左下角添加一个气泡，我使用了剪辑路径，但问题是我无法正确调整像素以使其看起来清晰且正是我想要的。任何人都可以向我建议如何实现它以及任何其他替代方法吗？我的代码

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tolltip {
  width: 147px!important;
  height: auto;
  background: transparent;
  border: 4px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
  border-bottom-color: transparent;
}

.tolltip:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -38px;
  width: 13px;
  height: 72px;
  clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
  background: white;
}

.tolltip:before {
  content: "";
  position: absolute;
  left: 8px;
  right: 0px;
  bottom: 0;
  border-bottom: 4px solid white;
}
<div class="tolltip">
  <h3>content</h3>
</div>

试图实现这一目标 在此处输入图像描述

标签： javascripthtmlcss

解决方案

这是一个不同的想法：

.tolltip {
  width: 147px;
  margin: auto;
  position: relative;
  padding: 10px;
}

.tolltip:before,
.tolltip:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border: 5px solid #fff;
}

.tolltip:before {
  top: 0;
  right: 0;
  border-radius: 15px 15px 15px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 
     25px 100%,  /* 25px = after width + border width */
     25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
     0    calc(100% - 10px), 
     0    100%);
}

.tolltip:after {
  top: 50%;
  width: 20px; /* adjust this */
  border-top: 0;
  border-right: 0;
  transform-origin: right;
  transform: skewY(-40deg); /* add this */
}

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="tolltip">
  <h3>content</h3>
</div>

推荐阅读