CSS 材质 UI 工具提示右侧的三角形

Question

问题是内容的高度在某些工具提示上发生了变化 this is how it is supposed to look 这是我试过的 when content is small when content is big

这是我所做的代码

const ToolTip = withStyles(() => ({
  tooltip: {
    display: "inline-block",
    backgroundColor: "#ffff",
    color: "#000",
    maxWidth: 280,
    fontWeight: 600,
    fontSize: 12,
    marginRight: 80,
    boxShadow: "0px 60px 116px rgba(0, 0, 0, 0.05), 0px 23.9688px 48.462px rgba(0, 0, 0, 0.0322996), 0px 10.925px 25.9101px rgba(0, 0, 0, 0.0260072), 0px 4.59406px 14.525px rgba(0, 0, 0, 0.0223691), 0px 1.44481px 7.71412px rgba(0, 0, 0, 0.018802), 0px 0.13156px 3.21002px rgba(0, 0, 0, 0.0130265)",
    textAlign: "justify",
    paddingRight: 30,
    borderRadius:8,
    position: "relative",
    minHeight:"160px",
    border: "1px solid rgba(0, 0, 0, 0.12)",
    '&::before': {
      content: '""',
      display:"block",
      position: "absolute",
      top:0,
      right:-80,
      borderBottom: "85px solid transparent",
      borderTop:"85px solid transparent",
      borderLeft: "85px solid #ffff"
    
    }
  },
}))(Tooltip);

Answer 1

您可以使用 clip-path 而不是使用边框。这允许您以 % 的形式定义多边形，这样它会自动调整到 div 的尺寸。

这里有一个简单的片段来说明这个想法，背景是通过一个 before 伪元素添加的，该伪元素向右延伸超出了包含实际文本的 div 的宽度。

div {
  width: 200px;
  height: auto;
  min-height: 50px;
  padding: 10px;
  position: relative;
}
div::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5%;
  background-color: gray;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
  z-index: -1;  
}

 <div>Some text here</div>
 <div>Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here</div>

CSS 材质 UI 工具提示右侧的三角形

CSS Triangle on materialui tooltip's right side

css

frontend

reactjs

css-shapes

material-ui