我試著在我設計的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%;
}

這對于一條對角線來說很好，但我不太確定如何做另一條，因為我最初的想法是改變角度，但這似乎產生了一條放置奇怪的對角線

另一種選擇是使用線性梯度()來產生線條；由于它支持多種漸變，我們可以這樣做:

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>