时间戳

首页 > 解决方案 > materialui工具提示右侧的CSS三角形

css - materialui工具提示右侧的CSS三角形

问题描述

问题是内容的高度在某些工具提示上正在改变 这是它应该看起来的样子 这是我 在内容小的 时候尝试的内容大的时候

这是我所做的代码

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);

标签： cssreactjsmaterial-uifrontendcss-shapes

解决方案

而不是使用边框，您可以使用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>

推荐阅读