Question

我有一个用引导程序制成的网格，其中一列用于图像，一列用于文本。我必须在文本列的左侧创建一个三角形，该三角形与图像重叠并且必须响应。根据容器的高度，它必须始终位于中间。我该怎么办？

<div class="row no-gutters">
    <div class="col-6">
      <img src="http://placehold.it/200x200" class="w-100" alt="">
    </div>
    <div class="col-6 ">
      <p>lorem ipsum dolor</p>
    </div>
</div>

结果应如下所示：https://imgur.com/mf9rDh8

Answer 1

可以通过在CSS中创建一个0x0 div来创建三角形，该div的边界为所需的三角形宽度。您需要将该div的边框颜色的除一侧以外的所有部分都设置为透明。这是一个例子：

library(StatsBombR)
library(tidyverse)

### Read in all free events and matches from the FAWSL
data <- StatsBombFreeEvents()
matches <- FreeMatches(Competitions = 72)

### Clean and separate all data loaded above
dataclean <- allclean(data)

### Filter event data to include only FAWSL data.
data1 <- dataclean %>% 
  filter(dataclean$competition_id == 72) 

### Join event and match data by "match_id"
data1 <- left_join(data1, matches, by = "match_id")


FullData <- data1 %>% 
  select(-c(related_events, tactics.lineup, shot.freeze_frame, location, pass.end_location, shot.end_location, goalkeeper.end_location))

setwd()
write_csv(FullData, "StatsBomb_FullData.csv")

Here's a pen是我创建您想要的示例的地方。

如何使用CSS制作响应式三角形

1 个答案: