Сделать так, чтобы текстовое поле отображалось справа от пути к оболочке / клипу

ProgramBox

Сделать так, чтобы текстовое поле отображалось справа от пути к оболочке / клипу

Post author:admin
Запись опубликована:19 июля, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я основал свой код на этой пирамиде компоновки CSS-фигур из codepen: https://codepen.io/s-gupta/pen/jOMGbMX

Я вполне доволен формой моей пирамиды, но я также хочу, чтобы текстовое поле появлялось справа от каждого шага пирамиды при наведении курсора мыши на элемент. Я основал свой код текстового поля на https://www.w3schools.com/css/css_tooltip.asp

Однако, как вы видите, текстовое поле отображается внутри оболочки / пирамиды, а не за ее пределами. Текст в текстовом поле будет довольно длинным, поэтому он не может находиться внутри пирамиды. Как я могу заставить его выйти наружу (и желательно справа от пирамиды)?

Я совсем новичок в CSS / HTML, но я пытаюсь учиться — надеюсь, кто-нибудь сможет мне помочь 🙂

 body {
  /*background: #333;
  font-family: "SF UI Text", "Avenir", "Helvetica", arial, san-serif;
  color: #888;*/
}


.wrapper {
  margin: 5vh auto 0;
}

.pyramid {
  float: left;
  shape-outside:polygon(310px 0px, 130px 405px, 558px 405px);
  padding-right:60px;
  width: 700px;
  height: 500px;
}
.zone {
  padding:40px 0;
  margin: 0 auto;
  text-align:center;
  color: black;
  background-blend-mode:darken;
  transition: 0.5s;
}
.zone:nth-child(1){
   background:rgba(248,153,46); /* url("https://pixabay.com/static/uploads/photo/2016/01/05/13/34/laugenbrotchen-1122509_960_720.jpg") center / cover;*/
  width: 20%;
  clip-path:url("#part1");
  clip-path:polygon(50% 0%,0%,100% 100%, 0% 100%);
  /*-webkit-clip-path:polygon(50% 0%,100% 100%, 0% 100%);*/
   
}
.zone:nth-child(2){ background:rgba(248,153,46); 
  width: 40%;
  clip-path:url("#part2");
  clip-path:polygon(40% 0%,0%,60% 0, 100% 100%,0% 100%);
  /*-webkit-clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(3){
  width: 60%;
  background:rgba(248,153,46); 
  clip-path:url("#part3");
  clip-path:polygon(30% 0,0%, 70% 0, 100% 100%,0% 100%);
  /*-webkit-clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(4){
  background:rgba(248,153,46); 
  width: 80%;
  clip-path:url("#part4");
  clip-path:polygon(20% 0, 0%,80% 0, 100% 100%,0% 100%);
  /*-webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%);*/
}
.zone:nth-child(5){
  background:rgba(248,153,46); 
  width: 100%;
  clip-path:url("#part5");
  clip-path:polygon(10% 0, 0%,100% 0, 100% 100%,0% 100%);
  /*-webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%);*/
}
/*.zone:hover {
  background-color: rgba(118,113,113);
  color: white;
}
*/
.zone .arrowtext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  top: -5px;
  left: 105%;
}

.zone .arrowtext::after {
  content: " ";
  position: relative;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.zone:hover {
  background-color: rgba(118,113,113);
  color: white;
}

.zone:hover .arrowtext{
  visibility: visible;
}

 <div class="wrapper">
  <div class="pyramid">
    <div class="zone">0. zero
   <span class="arrowtext">Tooltip text</span></div>
    <div class="zone">1. One</div>
    <div class="zone">2. Two</div>
    <div class="zone">3. Three</div>
    <div class="zone">4. Four</div>
  </div>
  
<svg width="0" height="0">
    <defs>
   <clipPath id="part1" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.5 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part2" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.25 0,0.75 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part3" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.165 0,0.83 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part4" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.125 0,0.875 0, 1 1, 0 1"/>
   </clipPath>
   <clipPath id="part5" clipPathUnits= "objectBoundingBox">
     <polygon points= "0.1 0,0.9 0, 1 1, 0 1"/>
   </clipPath>
     </defs>
</svg>

Развернуть фрагмент

И далее, как я мог arrowtext бы просмотреть несколько предложений? Я подумал, что могу сделать ширину шире и уменьшить clip path , чтобы треугольник занимал меньше площади. Это решает проблему отображения целых 1-2 строк, но как насчет получения текста, который занимает более 2 строк? Я пробовал z-index , например, но не работает. Другими словами, я ищу способ заставить текст расширяться дальше, чем только высота наведенного элемента или zone .

1. без необходимости реструктурировать весь код? —> у вас может быть более простой, простой и короткий код, чем тот, что у вас есть, и в то же время устранить вашу проблему

2. @TemaniAfif это было бы еще лучше, конечно! Вы правы, я мог бы сформулировать себя немного лучше.

3. поэтому удалите это требование из своего вопроса, если вы хотите, чтобы люди предлагали лучшее решение, иначе многие не захотят исправлять существующий код

4. Я изменил его сейчас, спасибо за ваш отзыв @TemaniAfif.

Ответ №1:

Вот упрощенная версия, в которой я уменьшаю размер ради демонстрации (не стесняйтесь их обновлять).

Хитрость заключается в создании треугольных фигур с использованием псевдоэлемента для каждого элемента «зоны». Делая их относительно «пирамиды», они будут перекрываться (создавая иллюзию только одного). Затем, используя clip-path:inset(0) «zone», каждый из них будет отображать одну часть в треугольнике.

 .pyramid {
  width: 400px;
  margin: auto;
  z-index: 0;
  position: relative; /* relative on "pyramid" and not "zone" */
}
/* build the triangle as pseudo element fo "zone" */
.zone:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 153, 46);
  /* the pyramid shape */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transition: 0.5s;
}

.zone {
  padding: 20px 0;
  text-align: center;
  cursor: pointer;
  color: black;
  clip-path: inset(0); /* clip the triangle to only the shape of each "zone"*/
}
/* using an extra div to correctly place the tooltip*/
.zone > div {
  display:inline-block;
  position:relative;
}
/* update color on hover */
.zone:hover {
  color: white;
}
.zone:hover:before {
  background: rgba(118, 113, 113);
}
/**/

.zone .arrowtext {
  position: absolute;
  visibility: hidden;
  white-space:nowrap;
  background-color: black;
  color: #fff;
  padding: 5px;
  border-radius: 6px;
  top: -5px;
  left: 105%;
}

.zone:hover .arrowtext {
  visibility: visible;
}

 <div class="pyramid">
  <div class="zone">
    <div>0. zero<span class="arrowtext">Tooltip text</span></div>
  </div>
  <div class="zone">1. One</div>
  <div class="zone">2. Two</div>
  <div class="zone">3. Three</div>
  <div class="zone">4. Four</div>
</div>

Развернуть фрагмент

1. вау, здорово @TemaniAfif , это здорово. Большое вам спасибо! 🙂

2. Большое спасибо за гораздо лучший код @temani — Пожалуйста, смотрите Дополнительные правки в конце моего вопроса, если у вас есть время и знаете, как я мог бы заставить его работать, чтобы arrowtext развернуть на несколько строк.

3. @RamyPanda удалите пробел:nowrap

4. Я хотел, чтобы это сработало @Temani, но, к сожалению, этого не происходит. Удаление white-space и, например, увеличение width делает текстовое поле шире, но height оно не опускается ниже области зоны, даже если я пытаюсь увеличить height , z-index и так далее.

Метки: Сделайте так, чтобы текстовое поле отображалось справа от пути обертки/клипа