材质ui工具提示右侧的CSS三角形[重复]答案

【问题标题】：CSS Triangle on materialui tooltip's right side [duplicate]材质ui工具提示右侧的CSS三角形[重复]
【发布时间】：2021-09-14 21:03:11
【问题描述】：

问题是内容的高度在某些工具提示上发生了变化 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);

【问题讨论】：

标签： css reactjs material-ui frontend css-shapes

【解决方案1】：

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

这是一个简单的 sn-p 给出的想法，背景是通过一个 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>

【讨论】：