reactjs 在样式组件div中画十字？

zrfyljdw 于 2023-05-17 发布在 React

关注(0)|答案(1)|浏览(173)

我试图画一个十字架内的一个div我的风格。我使用的是样式化组件。
代码如下：

export const StyledCell = styled.div`
    width: auto;
    background: rgba(${props => props.color}, 0.1);
    border: ${props => (props.type === 0 ? '0px solid' : '4px solid')};
    border-bottom-color: rgba(${props => props.color}, 0.5);
    border-right-color: rgba(${props => props.color}, 1);
    border-top-color: rgba(${props => props.color}, 1);
    border-left-color: rgba(${props => props.color}, 0.7);
    position: relative;
`

我试着补充：

:after{
  content:"";
  position:absolute;
  border-top:1px solid red;
  width:40px;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

它的作品相当不错的一个对角线，但我不太清楚如何做另一个，因为我最初的想法是只是改变Angular ，但似乎拿出了一个奇怪的对角线放置

reactjs

来源：https://stackoverflow.com/questions/76242872/drawing-a-cross-inside-a-styled-components-div

1条答案

按热度按时间

mkshixfv1#

另一种选择是使用linear-gradient()来生成线;由于它支持多个梯度，我们可以这样做：

div {
  margin: 2rem;
  width: 20rem;
  height: 20rem;
  position: relative;

  /* draw a gradient which is:
     transparent up to 1px less than the midpoint,
     then red for a couple of pixels,
     then transparent again
  */

  /* first from the bottom left corner to the top right ... */
  background: linear-gradient(to top right, 
    transparent calc(50% - 1px), 
    red calc(50% - 1px) calc(50% + 1px), 
    transparent calc(50% + 1px)),
    
    /* ... then from the top left corner to the bottom right */
    linear-gradient(to bottom right, 
      transparent calc(50% - 1px), 
      red calc(50% - 1px) calc(50% + 1px), 
      transparent calc(50% + 1px));     
}

<div></div>

赞(0）回复(0）举报 2023-05-17

我来回答

reactjs 在样式组件div中画十字？

1条答案

相关问题

热门标签

最新问答