Блог

Главная - Вопросы по программированию - Как создать асимметричный треугольник в левом нижнем углу окна?

Как создать асимметричный треугольник в левом нижнем углу окна?

#html #css

#HTML #css

Вопрос:

Мне нужно создать окно со стрелкой в левом нижнем углу. Моя проблема в том, чтобы получить асимметричный треугольник.

Вот пример для нижней границы окна с треугольником в левом нижнем углу:

Пример

Это моя попытка до сих пор:

 .box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
}  
 <div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Комментарии:

1. Можете ли вы разделить html и javascript, чтобы мы могли запускать код

2. Измените значение dupe на .comment:before { background-color: skyblue; bottom: -20px; left: 40px; } , чтобы указывать в другую сторону

3. Если вы хотите, чтобы он был слева, почему вы устанавливаете, right:30px а не left:0 ? 🙂

4. @MihaiT Извините, это была ошибка копирования…

Ответ №1:

Я немного отредактировал ширину границы и добавил transform: skewX() . Вы можете играть с правильным количеством для перекоса. Кроме того, :after изменилось на :before , и я поиграл с left свойством и удалил right .
надеюсь, это поможет:

 .box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 8px;
  bottom: -15px;
  border-top: 15px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: skewX(20deg);
}  
 <div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Ответ №2:

Напишите приведенный ниже код для создания стрелки 

 .box {
position: relative;
background: #00aabb;
border-radius: .4em;
}

.box:after {
content: '';
position: absolute;
bottom: 0;
left: 0%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #00aabb;
border-bottom: 0;
border-right: 0;
margin-left: -10px;
margin-bottom: -20px;
}

Комментарии:

1. Чтобы получить асимметричный треугольник в соответствии с запросом, я бы предложил установить margin-left значение 5px и использовать преобразование CSS, такое как transform: skew(30deg) . Живой пример на JSFiddle

2. Да, вы также можете выполнить преобразование.

Ответ №3:

Вот идея, использующая несколько фонов и опирающаяся на conic-gradient() 1

 .box {
  width: 150px;
  height: 75px;
  background: 
    conic-gradient(transparent 314deg, black 315deg,black 340deg,transparent 342deg)
    bottom -30px left 0/60px 60px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}  
 <div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Здесь только градиент, чтобы лучше видеть, как он работает:

 .box {
  width: 60px;
  height: 60px;
  background: 
    conic-gradient(red 314deg, black 315deg,black 340deg,red 342deg)
}  
 <div class="box">
</div>

1: Поддерживается только в Chrome на самом деле

Еще одна идея с linear-gradient , но без прозрачности:

 .box {
  width: 150px;
  height: 75px;
  background: 
    linear-gradient(to bottom left,transparent 49%,#fff 50%) bottom 0 left 0/30px 30px border-box,
    linear-gradient(250deg, transparent 10px,#000 11px) bottom 0 left 0/30px 30px border-box,     
    black padding-box;
  background-repeat:no-repeat;
  color: #fff;
  padding: 20px;
  border-bottom:30px solid transparent; /*the space for the gradient*/
  margin: 40px;
}  
 <div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>

Комментарии:

1. Выглядит идеально. Именно то, что мне нужно, но, к сожалению, поддерживается только Chrome, что для меня не вариант…

2. @user3142695 да, нам все еще нужно немного подождать, но это происходит;) скоро это будет поддерживаться везде. Я также добавил еще одну идею с простым градиентом, но без прозрачности

Ответ №4:

Вы могли бы использовать SVG в качестве фона псевдоэлемента, например

 .box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 30px;
  bottom: -30px;
  width: 22px;
  height: 30px;
  color: #000;
  background: url('data:image/svg xml;utf8,<svg viewBox="0 0 22 30" 
                   xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
                   <path d="M0 0 L22 30 L15 0 z" fill="#000" /></svg>');
}

Пример Codepen

Ответ №5:

Я обновил CSS с помощью transform:rotate и border , проверьте это

 .box {
  width: 150px;
  height: 75px;
  background-color: black;
  color: #fff;
  padding: 20px;
  position: relative;
  margin: 40px;
  float: left;
}

.box.arrow-bottom:after {
  content: " ";
  position: absolute;
  right: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 15px solid transparent;
  border-left: 0px solid black;
  border-bottom: none;
  transform: rotate(20deg);
}

.box.arrow-bottom:before {
  content: " ";
  position: absolute;
  left: 7px;
  bottom: -41px;
  border-top: 45px solid black;
  border-right: 0px solid transparent;
  border-left: 15px solid transparent;
  border-bottom: none;
  transform: rotate(-20deg);
}  
 <div class="box arrow-bottom">
  This is a box with some content and an arrow at the bottom.
</div>