Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Question about ::after pseudo element and clippath

Explorer ,
Aug 11, 2022 Aug 11, 2022

Is it possible to create an after element that contains a clippath?

 

What I am trying isn't working, and I can't seem to find any examples where a clippath is used to create the content for the visual part of the after element.

 

Basically, I am creating a gannt chart where the boxes of the actions in the timeline have an arrow leading to the next step in the process. So, if what I am trying isn't possible but you have an alternative suggestion, then I would welcome your input.

 

Thanks.

TOPICS
Code
554
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2022 Aug 11, 2022

Please show us your code.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2022 Aug 11, 2022

have you try using CONTENT property, pointing to an URL as

 

div::after {
  content:url("image.webp");
}

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2022 Aug 11, 2022
LATEST

Possibly Related:  Clip-path with pseudo-class Before element

https://stackoverflow.com/questions/53306479/css-clip-path-breaks-pseudo-before-element-stack-order

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines