主页 / 问题 / 1084861
Accepted
FX_Sektor
Asked:2020-02-19 23:57:29 +0000 UTC2020-02-19 23:57:29 +0000 UTC

如何在块的角上绘制三角形指针

  • 772

在此处输入图像描述

尝试使用各种 HTML 生成器来渲染损坏的多边形。但它仍然不能按照你想要的方式工作。据我了解，应该从左侧按下另一个块，反之亦然，并且它有一个破角？

我们的简单解决方案在 htmlbook.ru 上，但我需要

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Треугольник</title>
  <style>
   .block {
    border: 1px solid green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
   }
   .block::before, .block::after {
    content: ''; 
    position: absolute;
    left: 5px; bottom: -20px;
    border: 10px solid transparent;
    border-top: 10px solid green;
   }
   .block::after {
    border-top: 10px solid white;
    bottom: -19px; 
   }
  </style>
 </head>
 <body>
  <div class="block">
   Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
  </div>
 </body>

但在角指针上，而不是在下面。你怎么能把它移到角落？

html

1 个回答

  1. Best Answer

    .block {
  position: relative;
  border: 2px solid #c8c8c8;
  border-radius: 5px;
  padding: 20px;
  background: #eee;
}
.block::after {
  content: '';
  position: absolute;
  height: 20px; width: 20px;
  border: 2px solid #c8c8c8;
  border-radius: 20px 0px 5px 0px;
  border-color: transparent #c8c8c8 #c8c8c8 transparent;
  background: linear-gradient(135deg, transparent 48%, #eee 49%);
  /* Снизу слева */
    bottom: -6px; left: -6px; transform: rotate(90deg) skew(20deg, 20deg);
  /* Снизу справа
    bottom: -6px; right: -6px; transform: rotate(0deg) skew(20deg, 20deg); */
  /* Сверху справа
    top: -6px; right: -6px; transform: rotate(270deg) skew(20deg, 20deg); */
  /* Сверху слева
    top: -6px; left: -6px; transform: rotate(180deg) skew(20deg, 20deg); */
  /* Сверху
    top: -12px; left: 50%;
    transform: translate(-50%, 0%) rotate(225deg) skew(20deg, 20deg); */
  /* Снизу
    bottom: -12px; left: 50%;
    transform: translate(-50%, 0%) rotate(45deg) skew(20deg, 20deg); */
  /* Слева
    bottom: 50%; left: -12px;
    transform: translate(0%, 50%) rotate(135deg) skew(20deg, 20deg); */
  /* Справа
    bottom: 50%; right: -12px;
    transform: translate(0%, 50%) rotate(315deg) skew(20deg, 20deg); */
}
    <div class="block">
  Глокая куздра штеко будланула бокра и кудрячит бокрёнка.
</div>

    • 8

相关问题