从表

Question

有人可以用块元素拟合三角形来帮助我吗？当用指针指定菜单元素时，如何删除上面那个不必要的新行？ 有人可以用块元素拟合三角形来帮助我吗？当用指针指定菜单元素时，如何删除上面不必要的新行？

代码 https://jsfiddle.net/fxdruwxf/

body{
  width: 400px;
  margin:0 auto;
}


#navtable{
  position: relative;

  width: 238px;
  height: 900px;

  border-radius: 6px;
  border: 1px solid grey;
  background: white;
}


.elem{
  color: dodgerblue;
  font-weight: bold;
  padding: 10px 0px;
}

.elem:last-child{
  line-height: 18px;
  font-size: 10px
}
.elem:hover{
  background-color: #C20009;
  color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.elem:hover .tr {
  height:40px;
  width:40px;
  overflow:hidden;
  transform:scale(1,1.2);/* increase visual height */
  position: relative;
  left: -40px;
  bottom: -30px;
}
.tr::before{
  float: left;
  content:"";
  width:70%;
  height:70%;
  float:right;
  background:#C20009;
  transform:rotate(-45deg);
  box-shadow: 0 0 1px, inset 0 1px 1px , inset 5px -5px 5px rgba(0,0,0,0.3);
   transform-origin: top right;
   border-radius : 8px 0 0 0 /* and the rounded corner to finish */
  }

<div id="navtable"> 
    <br>
    <div class="elem"><div class="tr"></div>Polecamy</div>
    <div class="elem"><div class="tr"></div>Promocja</div>
    <div class="elem"><div class="tr"></div>Nowości</div>
    <div class="elem"><div class="tr"></div>Wypróbuj</div>

    <br>
    <div class="elem"><div class="tr"></div>Wszystkie</div>
</div>

Answer 1

考虑让您的tr类绝对定位，并将包含elem元素放在相对位置：

.elem:hover{
  background-color: #C20009;
  color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  /* This will cause any child elements to be positioned relative to it */
  position: relative;
}

.elem:hover .tr {
  height:40px;
  width:40px;
  overflow:hidden;
  transform:scale(1,1.2);/* increase visual height */
  /* This will be positioned absolutely to it's container (which is relative) */
  position: absolute;
  left: -40px;
  /* Since this is absolutely positioned, you'll want it to appear at the top */
  top: 0px;
}

这应该可以为您提供大致相同的效果，如下例所示。

示例

＆＃13;

＆＃13;

body {
  width: 400px;
  margin: 0 auto;
}
#navtable {
  position: relative;
  width: 238px;
  height: 900px;
  border-radius: 6px;
  border: 1px solid grey;
  background: white;
}
.elem {
  color: dodgerblue;
  font-weight: bold;
  padding: 10px 0px;
}
.elem:last-child {
  line-height: 18px;
  font-size: 10px
}
.elem:hover {
  background-color: #C20009;
  color: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
}
.elem:hover .tr {
  height: 40px;
  width: 40px;
  overflow: hidden;
  transform: scale(1, 1.2);
  /* increase visual height */
  position: absolute;
  left: -40px;
  top: 0px;
}
.tr::before {
  float: left;
  content: "";
  width: 70%;
  height: 70%;
  float: right;
  background: #C20009;
  transform: rotate(-45deg);
  box-shadow: 0 0 1px, inset 0 1px 1px, inset 5px -5px 5px rgba(0, 0, 0, 0.3);
  transform-origin: top right;
  border-radius: 8px 0 0 0
  /* and the rounded corner to finish */
}

＆＃13;

<div id="navtable">
  <br>
  <div class="elem">
    <div class="tr"></div>Polecamy</div>
  <div class="elem">
    <div class="tr"></div>Promocja</div>
  <div class="elem">
    <div class="tr"></div>Nowości</div>
  <div class="elem">
    <div class="tr"></div>Wypróbuj</div>

  <br>
  <div class="elem">
    <div class="tr"></div>Wszystkie</div>
</div>

＆＃13;

＆＃13;

＆＃13;