CSS Container Borderında Destek

04-09-2024, 14:43:02

#1

yazilimfrondend

Projede bir kısımda tıkandım, containerin borderının sağ alt kısmını bu şekilde yapamadım yapılabilir bişey midir bu ?

04-09-2024, 15:00:00

#2

ahmtcn37

yazilimfrondend adlı üyeden alıntı: mesajı görüntüle

Projede bir kısımda tıkandım, containerin borderının sağ alt kısmını bu şekilde yapamadım yapılabilir bişey midir bu ?

css'de clip-path özelliğine bakabilirsiniz işinize yarayabilir

04-09-2024, 15:40:25

#3

yazilimfrondend

ahmtcn37 adlı üyeden alıntı: mesajı görüntüle

css'de clip-path özelliğine bakabilirsiniz işinize yarayabilir

clip ile çözemedim hocam

04-09-2024, 16:27:57

#4

Canozkan

bu container görsel olarak mı kulanılacak? tam olarka istenilen bu mudur?

04-09-2024, 17:40:09

#5

yazilimfrondend

Canozkan adlı üyeden alıntı: mesajı görüntüle

bu container görsel olarak mı kulanılacak? tam olarka istenilen bu mudur?

bu işimi görür hocam, container alanı var borderı var borderın sağ alt kısmı senin gönderdiğin resimdeki gibi olacak

04-09-2024, 17:42:31

#6

Canozkan

yazilimfrondend adlı üyeden alıntı: mesajı görüntüle

bu işimi görür hocam, container alanı var borderı var borderın sağ alt kısmı senin gönderdiğin resimdeki gibi olacak

html:

<div class="container-div">
  <img src="https://bit.ly/3MBfGHz" class="bottom-right">
  <button class="btn-circle">
    OK
  </button>
</div>

Css:

img {
  height:200px;
  width:200px;
   position:absolute;
  z-index:1;
  --r: 25px;
  --s: 50px;
  --_m: / calc(2 * var(--r))  calc(2 * var(--r))
    radial-gradient(#000 70%, #0000 72%) no-repeat;
  border-radius: var(--r);
}

.bottom-right {
  mask:
    right 0 bottom calc(var(--s) + var(--r)) var(--_m),
    right calc(var(--s) + var(--r)) bottom 0 var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 101%) 
    calc(-1 * var(--r)) calc(-1 * var(--r)) no-repeat,
    conic-gradient(
      from 90deg at calc(100% - var(--s) - 2 * var(--r))
      calc(100% - var(--s) - 2 * var(--r)),
      #0000 25%,
      #000 0
    );
}

.container-div{
  position:relative;
  display:block;
  height:200px;
  width:200px;
  
}
.btn-circle{
  position:absolute;
  bottom:5px;
  right:5px;
  z-index:2;
  border-radius:50%;
  height:50px;
  width:50px;
  background:#222222;
  color:white;
  border:none;
}

Kaynak : https://www.instagram.com/reel/C_dTEyctzln/?igsh=b3p1dm1nY3RvN243

04-09-2024, 18:32:57

#7

yazilimfrondend

Canozkan adlı üyeden alıntı: mesajı görüntüle

html:

<div class="container-div">
  <img src="https://bit.ly/3MBfGHz" class="bottom-right">
  <button class="btn-circle">
    OK
  </button>
</div>

Css:

img {
  height:200px;
  width:200px;
   position:absolute;
  z-index:1;
  --r: 25px;
  --s: 50px;
  --_m: / calc(2 * var(--r))  calc(2 * var(--r))
    radial-gradient(#000 70%, #0000 72%) no-repeat;
  border-radius: var(--r);
}

.bottom-right {
  mask:
    right 0 bottom calc(var(--s) + var(--r)) var(--_m),
    right calc(var(--s) + var(--r)) bottom 0 var(--_m),
    radial-gradient(var(--s) at 100% 100%, #0000 99%, #000 101%) 
    calc(-1 * var(--r)) calc(-1 * var(--r)) no-repeat,
    conic-gradient(
      from 90deg at calc(100% - var(--s) - 2 * var(--r))
      calc(100% - var(--s) - 2 * var(--r)),
      #0000 25%,
      #000 0
    );
}

.container-div{
  position:relative;
  display:block;
  height:200px;
  width:200px;
  
}
.btn-circle{
  position:absolute;
  bottom:5px;
  right:5px;
  z-index:2;
  border-radius:50%;
  height:50px;
  width:50px;
  background:#222222;
  color:white;
  border:none;
}

Kaynak : https://www.instagram.com/reel/C_dTEyctzln/?igsh=b3p1dm1nY3RvN243

eline koluna sağlık hocam, kodlar gayet temiz çalışıyor yalnız resim üzerinde oluyor bu bunu bordera yapma şansımız yok mu acaba ?

04-09-2024, 20:32:52

#8

Canozkan

yazilimfrondend adlı üyeden alıntı: mesajı görüntüle

eline koluna sağlık hocam, kodlar gayet temiz çalışıyor yalnız resim üzerinde oluyor bu bunu bordera yapma şansımız yok mu acaba ?

Araştırdım ama bulamadım hocam

04-09-2024, 20:54:52

#9

yazilimfrondend

Canozkan adlı üyeden alıntı: mesajı görüntüle

Araştırdım ama bulamadım hocam

ilginiz için teşekkür ederim hocam