5

Estou a desenvolver um portfólio em angular, mas tenho uma dúvida em SCSS. Tinha o interesse em criar algo que não costumo ver muito em portfólios, inserir o background do portfólio apenas no canto superior ou inferior da div principal, ou seja, deixo um exemplo num print abaixo.

Exemplo da dúvida

No meu HTML tenho o seguinte código:

<div class="background"></div>
<div class="ui grid content-main">
  <div class="two wide column">
    <div class="menu">
      <div class="menuAvatar">
        <img class="ui small circular image avatar" src="./assets/icons/avatar.svg">
      </div>
      <div class="ui list menuNavigation">
        <div class="item" [routerLink]="['/about-me']" routerLinkActive="item-active">About Me</div>
        <div class="item" [routerLink]="['/services']" routerLinkActive="item-active">Services</div>
        <div class="item" [routerLink]="['/works']" routerLinkActive="item-active">Works</div>
        <div class="item" [routerLink]="['/travel']" routerLinkActive="item-active">Travel</div>
        <div class="item" [routerLink]="['/social']" routerLinkActive="item-active">Social</div>
        <div class="item" [routerLink]="['/contact-me']" routerLinkActive="item-active">Contact Me</div>
      </div>
      <div class="menuCopyRights">
        <p>Copyright © 2019 Ricardo Soares</p>
      </div>
    </div>
  </div>
  <div class="fourteen wide column content-pages">
    <router-outlet></router-outlet>    
  </div>
</div>

A primeira div é um meu background com um position absolute com width 100% e height 100% com um z-index a 0 e depois então tenho o meu conteúdo. Em termos de SCSS estava/estou a fazer da seguinte maneira:

.background{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('https://viagensasolta.com/wp-content/uploads/2018/12/Funchal_Cable_Car_Madeira.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: brightness(75%);
    z-index: -1;
}

.content-main{
    height: 100%;
    margin: 0;
    background-color: white;
    position: relative;

    &:after {
        content: "";
        position: absolute;
        border-left: 400px solid transparent; 
        border-top: 400px solid transparent;
        top: 0px;
        right:0px;
    }  
}

Onde é que eu estarei a falhar aqui para que isto não esteja a funcionar, pois o triângulo fica a branco, não consigo chegar a nenhuma conclusão.

2 Respostas 2

6

Existem várias formas de fazer isso e a mais simples e mais crossbrowser ao meu ver é colocar dois backgrounds em uma div, o primeiro bg do fundo é a imagem, e por cima dela eu tenho um linear-gradiente em 45deg cobrindo apenas 50% da imagem com a mesma cor do fundo.

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.box {
	position: absolute;
	top: 0;
	right: 0;
	width: 160px;
	height: 160px;
	background: 
	linear-gradient(to top right, #fff 50%, transparent 50%),
	url(https://unsplash.it/160/160);
	background-repeat: no-repeat;
	background-size: cover;
}
<div class="box"></div>


Opção 2

Fazendo uma mask-image com um linear-gradiente que vai criar uma mascara de opacidade na imagem. Assim vc vai dar transparência na imagem e não colocar um gradiente de cor sólida por cima da imagem. Vc pode ler mais sobre essa técnica aqui Fazer efeitos nas bordas em CSS, como chanfro

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-image: linear-gradient(-45deg, #f00 0%, #000 100%);
}
.box {
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background: url(https://unsplash.it/160/160);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: linear-gradient(-135deg, #000000 50%, transparent 50%);
}
<div class="box"></div>

2
  • Obrigado esta funcionou bem! Commented 18/06/2019 às 20:51
  • @RicardoSoares legal que ajudou ai! []´s
    – hugocsl
    Commented 18/06/2019 às 21:02
2

Pode usar a propriedade clip-path para exibir apenas uma parte do ::after. No exemplo abaixo recortei o ::after do elemento em forma de triângulo com 3 coordenadas. As coordenadas são responsivas em relação às dimensões do ::after usando o valor em porcentagem (%), portanto você pode dimensionar o ::after do tamanho que quiser. Veja o exemplo:

.background{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('https://viagensasolta.com/wp-content/uploads/2018/12/Funchal_Cable_Car_Madeira.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    filter: brightness(75%);
    z-index: -1;
}

.content-main{
    height: 100%;
    margin: 0;
    background-color: white;
    position: relative;
}
.content-main::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        background-image: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
        top: 0px;
        right:0px;
}
<div class="background"></div>
<div class="ui grid content-main">
  <div class="two wide column">
    <div class="menu">
      <div class="menuAvatar">
        <img class="ui small circular image avatar" src="./assets/icons/avatar.svg">
      </div>
      <div class="ui list menuNavigation">
        <div class="item" [routerLink]="['/about-me']" routerLinkActive="item-active">About Me</div>
        <div class="item" [routerLink]="['/services']" routerLinkActive="item-active">Services</div>
        <div class="item" [routerLink]="['/works']" routerLinkActive="item-active">Works</div>
        <div class="item" [routerLink]="['/travel']" routerLinkActive="item-active">Travel</div>
        <div class="item" [routerLink]="['/social']" routerLinkActive="item-active">Social</div>
        <div class="item" [routerLink]="['/contact-me']" routerLinkActive="item-active">Contact Me</div>
      </div>
      <div class="menuCopyRights">
        <p>Copyright © 2019 Ricardo Soares</p>
      </div>
    </div>
  </div>
  <div class="fourteen wide column content-pages">
    <router-outlet></router-outlet>    
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .