naturallucky

https://qiita.com/Shinji-m/items/69a392685699f3ba95fb

 /* A pattern */
 display: table-cell;
 vertical-align: middle;
 
 /* B pattern */
 display: flex;
 align-items: center; /* 縦方向中央揃え */
 justify-content: center; /* 横方向中央揃え */

naturallucky

<style>
 @keyframes atumi{
   0%{ height: 0; } 
   30%{ height: 0; } 
   70%{ height: 10px; } 
   100%{ height: 10px; } 
 }
</style>
<div style="position:relative;">

naturallucky

<style>
.block{
  width:80pt;
  height:60pt;
  border:3pt solid #5d5;
  border-radius:8%;
}
.r-arrow-out{
}
.r-arrow{

naturallucky

example)
https://reasonable-code.com/gist-embed-customize/
https://gist.github.com/icora-nishikawa/e1c692d6bc381f7a6842254148c6bdd1

explain)
https://a.uotomizu.com/articles/github-gist-css-customize/

/*行の背景色を統一する*/
.gist table tr {
  background-color: rgba(220,220,220,0.2) !important;

naturallucky

<style>
.arrow_mp_l{
  border-bottom:2pt solid black;
  width:60pt;height:0pt;
}
.arrow_mp_l::after{
  content:"";
  right: -1pt;
  bottom: -1pt;
  border-right:10pt solid transparent;

naturallucky

3/3 CSSで斜線を引く方法:表の空セルなど任意のHTML要素に [ホームページ作成] All About
https://allabout.co.jp/gm/gc/457196/3/
.diagnal-line  {
    background-image: linear-gradient
        (to top right, transparent, transparent 48%, red 48%, red 52%, transparent 52%, transparent);
}

naturallucky

<style>

  /* I set more wider area.
     you can also change parameters like this.
         -100% ->   0%;
          200% -> 100%;
     each parameter are distance from : top right bottom left.
  */
@keyframes transition-showup-from-right{
     0% {clip-path: inset(-100% -100% -100%  200%); }

naturallucky

<style>
.parts{
    position:absolute;
    width:200pt;height:100pt;
    border:2pt solid gray;
}
.arrow-to-right{
    transform: perspective(200px) rotateX(60deg);
    border-left:0pt;border-top:0pt;
    

naturallucky

<style>
.parts{
  position: absolute;
}

.trapezoid{
  transform: perspective(200px) rotateX(45deg);
}
.cylinder-v{
  border-radius:50% / 10%;

naturallucky

CSSで木目調背景と畳調背景 - Qiita
https://qiita.com/nakyos/items/c71dbd723b1df3492b9a

.dark-wood {
  background:
    repeating-radial-gradient(
      circle at -1000% 0%,
      rgba(116, 77, 48, 0.7),
      #573216 7.5%,
      rgba(116, 77, 48, 0.9) 10%